HTML Video

The <video> element embeds a video into a document.

The attributes (controls, preload, loop) go inside <video> tag to change the behavior of the embedded video.

Example

<video width="340" height="260" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Try this code ❯

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

MIME Types:

Addition to declaring multiple encodings, the web server also needs to be instructed.

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.

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:

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

Note: 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.

Fallback Tip:

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

Tip: Use <source> element for cross browser support

Browser Compatibility

HTML Video Elements