This article is In Progress.
video tag represents an embedded video
autoplay= "autoplay" or "" (empty string) or empty
Instructs the UA to automatically begin playback of the video as soon as it can do so without stopping.
preload= "none" or "metadata" or "auto" or "" (empty string) or empty
Represents a hint to the UA about whether optimistic downloading of the video itself or its metadata is considered worthwhile.
- "none": Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.
- "metadata": Hints to the UA that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, track list, duration, and so on) is desirable.
- "auto": Hints to the UA that optimistically downloading the entire video is considered desirable.
Specifying the empty string is equivalent to specifying the value "auto".
controls= "controls" or "" (empty string) or empty
Instructs the UA to expose a user interface for controlling playback of the video.
loop= "loop" or "" (empty string) or empty
Instructs the UA to seek back to the start of the video upon reaching the end.
poster= URL potentially surrounded by spaces
The address of an image file for the UA to show while no video data is available.
height= non-negative integer
The height of the video, in CSS pixels.
width= non-negative integer
The width of the video, in CSS pixels.
muted= "muted" or "" (empty string) or empty
Represents the default state of the audio channel of the video, potentially overriding user preferences.
Instructs the UA to link multiple videos and/or audio streams together.
src= URL potentially surrounded by spaces
The URL for the video.
Native video playback without plugins
Browsers that support HTML5 video will play the media without the need for external plugins
The video formats is made up by a
video stream +
The three common formats for HTML5 video are: MP4, WebM and OGG Vorbis.
.mp4 = H.264 + AAC .ogg = Theora + Vorbis .webm = VP8 + Vorbis
Server MIME Types
Addition to declaring multiple encodings, the web server also needs to be instructed on the association between MIME types and co
The attributes (controls, preload, loop) go inside
<video> tag to change the behavior of the embedded video.
What about old browsers?
There are several techniques to ensure that people will be able to access the content we've created. Two of them are covered here: Chrome Frame and Flash Fallback
[Frame] is a plugin for Internet Explorer (up to version 8) that will allow the older browsers to work with HTML5 content (not just video and audio) as if it supported the features natively.
You can also use flash as a fallback for when the browser does not support any of the provided formats. Flash supports H264 and Adobe has committed to support the WebM format in their flash player although that time timeline is still not clear. The biggest drawback using Flash as opposed to the Chrome Frame plugin is that you will get the flash player interface instead of whatever UI you built for your video tag. The details of this technique can be seen in the Quick Guide to Implementing the HTML5 Audio tutorial.
<video width="320" height="240" controls="controls" preload="none"> <source src="movie.mp4" type="video/mp4"/> <source src="movie.ogg" type="video/ogg"/> <source src="movie.webm" type="video/webm"/> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240"/> </object> </video>
Authors should ensure that the information and user interface components must be presentable to users in ways they can perceive (WCAG 2.0 - Principle 1: Perceivable). This includes providing alternatives for time-based media Guideline 1.2.
Work in still in progress proper technical support in HTML5.
Formats and Codecs
The HTML5 specification does not require a video codec to be supported by all user agents. Thus, one need to provide alternate sources to ensure proper user experience in the existing user agents. Using Ogg/Theora/Vorbis and MP4/H.264/AAC seems to cover most of the cases out there (if not all). However, Ogg/Theora/Vorbis is being replaced in favor of WebM nowadays. See the wikipedia browser support table.
The HTML5 specification does not specify a particular streaming method. It is expected that HTTP 1.1 progressive streaming is at least supported. Adaptive/live streaming may be supported as a UA extension. For an example, see the HTTP Live Streaming Overview from Apple.
Digital Rights Management
The HTML5 specification does not specify a particular digital rights management (DRM) method. It is expected that videos with no DRM are at least supported. DRM may be supported as a UA extension.
Features Chrome Firefox Internet Explorer Opera Safari Basic support autoplay attribute buffered attribute controls attribute crossorigin attribue loop attribute muted attribute played property poster attribute preload attribute src attribute
Features Android Firefox Mobile IE Mobile Opera Mobile Safari Mobile Basic support autoplay attribute buffered attribute controls attribute loop attribute muted attribute played property poster attribute preload attribute src attribute crossorigin attribute
Desired video file should be within src attribute. As a best practice you should also include the controls attribute to show playback and volume controls
<video src="video.webm" controls="controls"></video>
View live exampleHTML5 Video Tag can support different encodings
<video> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogg" type="video/ogg" /> Your browser does not support the <code>video</code> element. You can download it <a href="video.webm">here</a>. </video>
|HTML 5.1||W3C Working Draft|
|HTML 5||W3C Recommendation|
- [Video Chapter] from Dive into HTML5
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]