|
If you find this helpful, please click the Google |
Button
The <video> Tag in HTML 5
There are also web sites that will automatically generate the code for HTML 5 video, such as Vyd.com's HTML 5 video URL shortener.
Slow motion video of particles being impacted by a solid sphere
500 fps high speed video from NASA JPL
This is an actual working example of the <video> tag example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)
<video> Tag Syntax
Rules for coding the HTML video element
<video> Tag Attributes
Attributes of the <video> tag
| global attributes | In addition to the personal attributes of the <video> tag below, any of the common HTML attributes can also be coded. |
| width, height | |
| src | a URI reference that resolves to the URL of the video resource Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference. If the value of the
If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash |
| poster | a URI reference that resolves to the URL of a two-dimensional image resource The poster is displayed as a preview of the video when the video is not being played. Use percent escape codes as explained in the URL-encoding tutorial for any special characters in the URI reference. If the value of the
If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash |
| autoplay="autoplay" | |
| controls="controls" | |
| loop="loop" | |
| preload="none" preload="metadata" preload="auto" |
HTML Media Events
| oncanplay | |
| oncanplaythrough | |
| onemptied | |
| onended | |
| onerror | |
| onloadeddata | |
| onloadedmetadata | |
| onloadstart | |
| onpause | |
| onplaying | |
| onprogress | |
| onratechange | |
| onreadystatechange | |
| onseeked | |
| onseeking | |
| onstalled | |
| onsuspend | |
| ontimeupdate | |
| onvolumechange | |
| onwaiting |
<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>
Changes in HTML 5 - <video> Tag
What's new in HTML 5
The <video> tag is one of the new elements in HTML 5.
Differences between HTML 5 and earlier versions of HTML
The <video> tag did not exist in older versions of HTML.
The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the video element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.