<video> Tag Examples
Examples of the video
tag in HTML 5
<video> tag with poster, video controls and separate pause / play button
(see <video> tag demo above)
<p>Slow motion video of particles being impacted by a solid sphere</p> <video poster="/media/deep-impact-movie.png" controls="controls" style="border: black 1px solid; margin: 4px"> <source src="/media/deep-impact-movie.ogg" type="video/ogg; codecs="theora,vorbis""/> <source src="/media/deep-impact-movie.mp4" type="video/mp4; codecs="avc1.42E01E,mp4a.40.2""/> </video> <form> <input type="button" value="▶" onclick=" var video = document.getElementsByTagName('video')[0]; if (video.paused) { video.play(); this.value="‖" } else { video.pause(); this.value="▶" } return false; "/> </form> <p>500 fps high speed video from NASA JPL</p>
In actual practice, you probably would use either the video controls or the pause / play button, not both.
Example of embedding video in HTML 5
When embedding video from another site, such as YouTube, in an HTML 5 page the <object> tag is typically used rather than the <video> tag:
<object width="1280" height="745"> <param name="movie" value="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/> <embed src="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"/> </object>
Demo of embedding a YouTube video:
embedded YouTube video
So far the WebKit browsers, such as Safari and Chrome do support HTML 5 video. If your current browser does not yet support HTML 5 video it should play the flash video instead.
HTML 5 video with fallback
The <video> tag can be combined with the <object> tag to provide for video with fallback. The fallback element(s) are coded within the <video> tag as shown in this example:
<video poster="poster.png" controls="controls" style="border: black 1px solid; margin: 4px"> <source src="http://Vyd.com/video.ogv" type="video/ogg; codecs="theora,vorbis""/> <source src="http://Vyd.com/video.mp4" type="video/mp4; codecs="avc1.42E01E,mp4a.40.2""/> <object width="1280" height="745" type="video/webm"> <param name="movie" value="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/> <embed src="http://www.YouTube.com/v/ZXYVyrrUZ3c&hl=en_US&fs=1&rel=0&hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"/> </object> </video>