HTML 5 video, html video
The video element supports three video formats. |
IE |
Firefox |
Opera |
Chrome |
Safari |
With Theora video encoding and Vorbis Audio EncodingOggFile |
No |
3.5 + |
10.5 + |
5.0 + |
No |
With H.264 video encoding and AAC audio encodingMPEG 4File |
9.0 + |
No |
No |
5.0 + |
3.0 + |
With VP8 video encoding and Vorbis Audio EncodingWebMFile |
No |
4.0 + |
10.6 + |
6.0 + |
No |
1. Set an ogg File
<Video src = "movie.ogg" controls = "controls" height = "200px" width = "300px">
Your browser does not support video tags.
</Video>
Run the following command:
If the browser does not support the ogg format, "your browser does not support video tags ."
2. Set multiple formats
<Video width = "320" height = "240" poster = "Suk.png" controls>
<Source src = "movie.mp4" type = "video/mp4">
<Source src = "movie.ogg" type = "video/ogg">
Your browser does not support video tags.
</Video>
Run the following command:
For example, set a default image for a video. You can also add other attributes.
<Video> the tag attributes are as follows:
Controls/controls = "controls" display play button
Autoplay/autoplay = "autoplay" play now
Loop/loop = "loop" loop playback
Muted/muted = "muted" mute
Preload/preload = "preload" load video d
Poster = "path" show default image
3. Custom pause and size (Video + DOM)
<Button onclick = "playPause ()"> play/pause </button>
<Button onclick = "makeNormal ()"> change the size </button>
<Video id = "video1" width = "200">
<Source src = "movie.mp4" type = "video/mp4">
<Source src = "movie.ogg" type = "video/ogg">
Your browser does not support video tags.
</Video>
Write javascript below html
<Script type = "text/javascript">
Var myVideo = document. getElementById ("video1 ");
Function playPause ()
{
I f (myVideo. paused)
MyVideo. play (); // play
Else
MyVideo. pause (); // pause
}
Function makeNormal ()
{
MyVideo. width = 420; // custom width, self-adaptive height
}
</Script>
Run the following command:
Video methods, attributes, and events supported by most browsers (to be understood later)
Method |
Attribute |
Event |
Play () |
CurrentSrc |
Play |
Pause () |
CurrentTime |
Pause |
Load () |
VideoWidth: run immediately -- run before the video Element |
SS |
CanPlayType () |
VideoHeight: run immediately -- run before video Element |
Error |
|
Duration |
Timeupdate |
|
Ended |
Ended |
|
Error |
Abort |
|
Paused |
Empty |
|
Muted |
Emptied |
|
Seeking |
Waiting |
|
Volume |
Loadedmetadata |
|
Height |
|
|
Width |
|
The following is a reference for html5 video and audio method attributes and events.
Http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp