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:

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

Example: http://itp.nyu.edu/~sve204/js_media/video_basics.html

Reference: http://www.w3schools.com/html/html5_video.asp

Browser Support: http://caniuse.com/#feat=video

        

Formats/Codecs:

MPEG-4/H.264: http://caniuse.com/#feat=mpeg4

WebM/VP8: http://caniuse.com/#feat=webm

http://www.webmproject.org/

                

Ogg/Theora: http://caniuse.com/#feat=ogv

        http://www.theora.org/

                Tools: Miro Video Converter: http://www.mirovideoconverter.com/

        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.

</video>

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

        

                Example: http://itp.nyu.edu/~sve204/js_media/video_basics_multi.html

        Audio:

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

Reference: http://www.w3schools.com/tags/tag_audio.asp

Browser Support: http://caniuse.com/#feat=audio

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.

</audio>

Attributes: autoplay, controls, loop, preload, src

JavaScript

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

                Overview:

                http://www.w3schools.com/tags/ref_av_dom.asp

                Quick Example:

<html>

        <head>

                <title>Video JavaScript</title>

        </head>

        <body>

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

                </video>

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

                        alert(theVideoObject);

                        

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

                                        theVideoObject.play();

                                } else {

                                        // Otherwise, pause it

                                        theVideoObject.pause();

                                }                

                        }

                </script>

        </body>

</html>

Example: http://itp.nyu.edu/~sve204/js_media/video_javascript.html

        More Information:

        http://www.html5rocks.com/en/features/multimedia

Popcorn.js - http://popcornjs.org/

        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="http://popcornjs.org/code/dist/popcorn-complete.min.js"></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: http://popcornjs.org/popcorn-docs/media-methods/#cue

popcorn.cue(5, function() {

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

        });

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

        http://popcornjs.org/popcorn-docs/plugins/        

        Show an image:

http://popcornjs.org/popcorn-docs/plugins/#Image

popcorn.image({

                start: 7,

                end: 10,

                target: "contentdiv",

                src: "image.jpg"

        });

        

        Set text content in a div:

        http://popcornjs.org/popcorn-docs/plugins/#Footnote

popcorn.footnote({

                start: 2,

                end: 6,

                text: "Hi!",

                target: "contentdiv"

        });                        

        Show a web page:

http://popcornjs.org/popcorn-docs/plugins/#Webpage

        Show a Processing.js sketch:

http://popcornjs.org/popcorn-docs/plugins/#Processing

        (Currently not working?)

                                        

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

popcorn.play();

        Full Example:  http://itp.nyu.edu/~sve204/js_media/video_popcorn.html

        Popcorn Maker: https://popcorn.webmaker.org/templates/basic/

WebRTC

Demo: http://www.walking-productions.com:8000

WebRTC.io: https://github.com/webRTC/webRTC.io

Live Video + Canvas

http://itp.nyu.edu/~sve204/js_media/video_self.html