HTML 5 Media Support

        HTML 5 introduced support for audio and video natively in the browser (without plugins).  This makes removes the need to use proprietary tools and formats (such as Flash, QuickTime, Windows Media, Real) in order to provide basic media capabilities.

Media Elements


<video width="720" height="480" src="video.mp4" controls />



Browser Support:







                Tools: Miro Video Converter:

        Supporting Multiple Formats:

<video width="720" height="480" controls>

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type="video/ogg">

Your browser does not support the video tag.


        Attributes: autoplay, controls, height, width, loop, muted, poster, preload, src




<audio controls src="audio.mp3" />


Browser Support:

Formats/Codecs:  MP3, Ogg Vorbis, WAV

        Supporting Multiple Formats:

                <audio controls>

<source src="audio.ogg" type="audio/ogg">

<source src="audio.mp3" type="audio/mpeg">

Your browser does not support the audio tag.


Attributes: autoplay, controls, loop, preload, src


                Of course, there are a lot of features and functionality available via JavaScript.  



                Quick Example:



                <title>Video JavaScript</title>



<!-- Add an “id” to the video tag so that we can access it easily in JavaScript -->

                <video width="720" height="480" controls id="thevideo">

                        <source src="video.webm" type="video/webm">

                        <source src="video.mp4" type="video/mp4">

                        <source src="video.ogg" type="video/ogg">

                        Your browser does not support the video tag.


<!-- When this button is clicked, call the doSomething function -->

                <button onClick="doSomething()">Do Something here</button>

                <script type="text/javascript">

                        // Get Access to the Video Object

                        var theVideoObject = document.getElementById("thevideo");

                        // Alert, just to make sure it isn’t null



// Called by the Do Something button

                        function doSomething() {

                                // Change the width

                                theVideoObject.width = theVideoObject.width/2;

                                if (theVideoObject.paused) {

                                // If the video is paused, call play


                                } else {

                                        // Otherwise, pause it








        More Information:

Popcorn.js -

        Popcorn is a JavaScript library that offers the ability to integrate HTML/CSS with time based media.

        To use it, first point to it in your page:

        <script src=""></script>

        Then you can create a Popcorn object, pointing to the “id” of your time based media

        var popcorn = Popcorn("#thevideo");

Following that, you can tell popcorn to do things on the page at certain points in your video.    Here we are using the “cue” method:

popcorn.cue(5, function() {

                alert("We are 5 seconds in!");


        Many plugins have been developed to allow specific things to happen:        

        Show an image:


                start: 7,

                end: 10,

                target: "contentdiv",

                src: "image.jpg"



        Set text content in a div:


                start: 2,

                end: 6,

                text: "Hi!",

                target: "contentdiv"


        Show a web page:

        Show a Processing.js sketch:

        (Currently not working?)


        Finally, we have to call the “play” method to kick things off.;

        Full Example:

        Popcorn Maker:



Live Video + Canvas