video

Summary

The video tag represents an embedded video

Overview Table

DOM Interface: HTMLVideoElement

HTML Attributes

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.
mediagroup = string
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 + audio 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

See MIME types to find more information about MIME types and Setting up MIME types on your server for more information regarding server setup to deliver HTML5 audio and video content.

Attributes

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

Chrome Frame

[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.

Flash fallback

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>

Accessibility

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.

Streaming

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.

Examples

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>

HTML5 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>

View live example

Related specifications

HTML 5.1: W3C Working Draft
HTML 5: W3C Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]