Did you find this useful?
Socialize it today.


HTML5 Video

Saturday, November 03, 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

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



Example

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.
    </video>





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.
    </video>



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> 
<html> 
<body> 
<div style="text-align:center"> 
    <button onclick="playPause()">Play/Pause</button> 
    <br/><br/>
    <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.
    </video>
</div> 
<script> 
    var myVideo=document.getElementById("video1"); 
    function playPause()
    { 
    if (myVideo.paused) 
    myVideo.play(); 
    else 
    myVideo.pause(); 
    } 
</script> 
</body> 
</html>



Play/Pause

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Definitive Guide to HTML5 HTML CSS and JavaScript Head First HTML5 Programming: Building Web Apps with JavaScript