HTML5 video media player - Adobe - The Expressive Web

HTML5 Video Feature

You can use the HTML5 VIDEO element to embed video in a web page without the need for third-party plug-ins. The VIDEO element is a standard web page element and integrates easily with the other layers of the web development stack. You can use JavaScript to build custom controls that match the look and feel of your design or apply a variety of effects to your video using CSS.

HTML5 Video

Minimum Browser Support:

HTML5 Video

Internet Explorer
9.0
Firefox
3.5
Safari
4.0
Chrome
3.0
Opera
10.5
Opera Mobile
11.0
iOS
4.0
Android
2.1

Note: Video codec support varies between browsers.

55.1%

Percentage of users who can view this feature (source: caniuse.com)

Examples

The Wilderness Downtown
Uses HTML5 video to create an interactive music video.
YouTube HTML5 Video Player
YouTube’s beta for delivering video via HTML5.

Reference and Documentation

Tutorials and Resources

Feature Detection

To ensure a client agent can play back your video, you need to test support for the VIDEO element as well as for the specific video codecs used in your source video:

Modernizr.video

Modernizr.video[codec]

if(Modernizr.video){
   //browser supports HTML5 Video
   //note the Modernizr.video.* apis return
   //"maybe", "probably" or an empty string
   if(Modernizr.video.webm){
      //browser supports the WebM codec
   }
   else if(Modernizr.video.ogg){
      //browser supports the Ogg Theora codec
   }
   else if(Modernizr.video.h264){
      //browser supports h264 codec
   }
}

Learn more about detecting feature support with Modernizr.

Fallback Strategies

If the video element in not supported in the browser, you can fallback to deploying the video via a plugin, such as the Adobe Flash Player. The Video for Everyone article provides one approach for doing this.