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. |
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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
