HTML5 Video

Saturday, November 3, 2012

HTML5 introduces built-in media support via the <video> element, which offers you the ability to easily and quickly embed your video media into HTML documents. The main advantage of the <video> element is that it provides support for playing video media without requiring external plug-ins. Video codecs are used to handle video and different levels of compression and quality.

Until now, there has not been a standard for showing a video on web pages. What you commonly find on web sites are videos presented through external plug-ins such as flash. HTML5 defines this new element which now provides a standard way to embed a video within a web document. Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <video> element. However, Internet Explorer 8 and previous versions, do not support the <video> element.

Video Format and Browser Support

Apple Safari 5+YesNoNo
Firefox 4+NoYesYes
Google Chrome 6+YesYesYes
Internet Explorer 9+YesNoNo
Opera 10.6+NoYesYes


The <video> element contains child elements so that the source files and fallback options can be configured. Multiple source files can be specified using the <source> element in order to provide the video encoded in different formats for different browsers.

    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Video playback is not supported by your browser.

You may also specify which codecs the media file requires. This allows the browser to make better decisions with regard to video playback. If the <source> element type attribute is not specified, the media's type is retrieved from the server and checked to see if the browser can support the format. If the format is not supported, the next source is checked. If none of the specified source elements can be used, an error event is dispatched to the video element. If the type attribute is specified, it is compared against the types the browser can play, and if it is not recognized, the next source is checked.

    <video width="320" height="240" controls>
        <source src="movie.ogv" type="video/ogg; codecs=dirac, speex">
        Video playback is not supported by your browser.

DOM Methods, Properties and Events

HTML5 has DOM methods, properties, and events for the <video> element. These methods, properties, and events allow you to manipulate <video> element using JavaScript. You can use methods for playing, pausing, and loading the videos. There are also DOM events that can notify you when the video begins to play, is paused, and/or has ended, for example.

<!DOCTYPE html> 
<div style="text-align:center"> 
    <button onclick="playPause()">Play/Pause</button> 
    <video id="video1" width="320" height="240">
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
    var myVideo=document.getElementById("video1"); 
    function playPause()
    if (myVideo.paused); 


Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Murachs HTML5 and CSS3 Head First HTML5 Programming: Building Web Apps with JavaScript HTML5: The Missing Manual