video

< html‎ | elements
Jump to: navigation, search

video

This article is In Progress.


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>


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
3.0
Yes
?
Unknown
9.0
Yes
10.5
Yes
3.1
Yes
autoplay attribute
3.0
Yes
?
Unknown
9.0
Yes
10.5
Yes
3.1
Yes
buffered attribute
?
Unknown
?
Unknown
?
Unknown
?
Yes
?
Unknown
controls attribute
3.0
Yes
?
Unknown
9.0
Yes
10.5
Yes
3.1
Yes
crossorigin attribue
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown
loop attribute
3.0
Yes
?
Unknown
9.0
Yes
10.5
Yes
3.1
Yes
muted attribute
?
Unknown
?
Unknown
?
Unknown
?
Yes
?
Unknown
played property
?
Unknown
?
Unknown
?
Unknown
?
Yes
?
Unknown
poster attribute
3.0
Yes
?
Unknown
9.0
Yes
10.5
Yes
3.1
Yes
preload attribute
3.0
Yes
?
Unknown
9.0
Yes
?
Yes
3.1
Yes
src attribute
3.0
Yes
?
Unknown
9.0
Yes
10.5
Yes
3.1
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Unknown
1.0
Yes
?
Unknown
?
Unknown
?
Unknown
autoplay attribute
?
Unknown
1.0
Yes
?
Unknown
?
Unknown
?
Unknown
buffered attribute
?
Unknown
4.0
Yes
?
Unknown
?
Unknown
?
Unknown
controls attribute
?
Unknown
1.0
Yes
?
Unknown
?
Unknown
?
Unknown
loop attribute
?
Unknown
11.0
Yes
?
Unknown
?
Unknown
?
Unknown
muted attribute
?
Unknown
11.0
Yes
?
Unknown
?
Unknown
?
Unknown
played property
?
Unknown
15.0
Yes
?
Unknown
?
Unknown
?
Unknown
poster attribute
?
Unknown
1.0
Yes
?
Unknown
?
Unknown
?
Unknown
preload attribute
?
Unknown
4.0
Yes
?
Unknown
?
Unknown
?
Unknown
src attribute
?
Unknown
1.0
Yes
?
Unknown
?
Unknown
?
Unknown
crossorigin attribute
?
Unknown
12.0
Yes
?
Unknown
?
Unknown
?
Unknown

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

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]