Html5 video and html5 video

Source: Internet
Author: User

Html5 video and html5 video

The video element supports three video formats.

Format IE 9 + Firefox Opera Chrome Safari
Ogg No 3.5 + 10.5 + 5.0 + No
MPEG 4 9.0 + No No 5.0 + 3.0 +
WebM No 4.0 + 10.6 + 6.0 + No

Ogg = Ogg file with Theora video encoding and Vorbis Audio Encoding

MPEG4 = MPEG 4 files with H.264 video encoding and AAC audio encoding

WebM = A WebM file with VP8 video encoding and Vorbis Audio Encoding

Eg.

<video width="320" height="240" controls="controls">  <source src="movie.ogg" type="video/ogg">  <source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>

<Video> tag attributes
Attribute Value Description
Autoplay Autoplay If this attribute appears, the video will be played immediately after it is ready.
Controls Controls If this attribute is displayed, the control, such as the play button, is displayed to the user.
Height Pixels Set the height of the video player.
Loop Loop If this attribute is displayed, the media file starts playing again after being played.
Preload Preload

If this attribute is displayed, the video is loaded when the page is loaded and ready for playing.

If "autoplay" is used, this attribute is ignored.

Src Url The URL of the video to be played.
Width Pixels Set the width of the video player.
HTML5 <video>-methods, attributes, and events

The video methods, attributes, and events supported by most browsers are listed below:

Method Attribute Event
Play () CurrentSrc Play
Pause () CurrentTime Pause
Load () VideoWidth SS
CanPlayType VideoHeight Error
  Duration Timeupdate
  Ended Ended
  Error Abort
  Paused Empty
  Muted Emptied
  Seeking Waiting
  Volume Loadedmetadata
  Height  
  Width  

Eg.

<! DOCTYPE html>
<Html>
<Body>

<Div style = "text-align: center;">
<Button onclick = "playPause ()"> play/pause </button>
<Button onclick = "makeBig ()"> large </button>
<Button onclick = "makeNormal ()"> medium </button>
<Button onclick = "makeSmall ()"> small </button>
<Br/>
<Video id = "video1" width = "420" style = "margin-top: 15px;">
<Source src = "../example/html5/mov_bbb.mp4" type = "video/mp4"/>
<Source src = "../example/html5/mov_bbb.ogg" type = "video/ogg"/>
Your browser does not support HTML5 video.
</Video>
</Div>

<Script type = "text/javascript">
Var myVideo = document. getElementById ("video1 ");

Function playPause ()
{
If (myVideo. paused)
MyVideo. play ();
Else
MyVideo. pause ();
}

Function makeBig ()
{
MyVideo. width = 560;
}

Function makeSmall ()
{
MyVideo. width = 320;
}

Function makeNormal ()
{
MyVideo. width = 420;
}
</Script>

</Body>
</Html>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.