video

< html‎ | elements
Jump to: navigation, search

video

This page has been flagged with the following issues:

Needs information on codec support. W3C Candidate Recommendation

Summary

The video tag allows a developer to embed a video in a document. It is new to HTML5. Different browsers have various format support


Overview Table

DOM Interface HTMLVideoElement

Native video playback without plugins

Browsers that support HTML5 video will play the media without the need for external plugins. We no longer need to have Flash installed in order to play video on browsers that support HTML5 video.

The video formats is made up by a video stream + audio stream.

The three main 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. I will cover two of them in this article: 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>

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

HTML

<video src="video.webm" controls="controls"></video>

View live exampleHTML5 Video Tag can support different encodings

HTML

<video>
            
 
 
 
           Your browser does not support the video element. 
           You can download it <a href="video.webm">here</a>.

</video>


Standards information

Related specifications

Specification Status Related Changes
HTML5 W3C Candidate Recommendation

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 3
3.5
9
10.50
4


MP4 (H.264 + AAC) 3
Unsupported
9
Unsupported
4


Ogg (Theora + Vorbis) 3
3.6
Unsupported
10.50
Unsupported


WebM (VP8 + Vorbis) 6
4
Unsupported
10.60
Unsupported

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 2.3
7.0
18
4
9.0
11
Unsupported
3.2


MP4 (H.264 + AAC) 2.1
4.6
18.0
18.0
9.0
11.5
Unsupported
3.2


Ogg (Theora + Vorbis) Unsupported
Unsupported
?
?
Unsupported
?
?
Unsupported


WebM (VP8 + Vorbis) 2.3
?
?
?
Unsupported
?
?
Unsupported


Compatibility notes

Browser Version Note
Chrome Google has announced that H.264 support will be removed from Google Chrome in the future.
Internet Explorer 9+ Beginning with Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won't play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video. WebM audio and video files can be supported by installing the WebM components from The WebM project.
Safari Safari requires QuickTime to play video.
Android 2.1 - 4.0 Requires specific handling to run the video element to suport MPEG-4/H.264
Firefox Last versions of Firefox support MPEG-4/H.264 on Windows Vista, Windows 7, Windows 8, Linux, last versions of Android, and soon everywhere [1]

See also

Related articles

Video







  • video





External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]