HTML5 Video

There is a lot of documentation on HTML5 video tags, like here and here. Although the more intricate documentation which covers most of the events associated with media type is documented well on whatwg.org documentation.

You may want to open the links mentioned here in a new tab.

This post is about some of the things that we got to know while working with video.js JavaScript library. You can view the demo of what follows here. For complete source code you could look in to the source code of the demo page. Although here we would highlight some of the code.

Consider that your initial video tag state is like following.

    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="320" height="180" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    </video>

Initialize VideoJs Player

    var app = {}; // Sort of namespacing
    app.p1 = _V_('example_video_1'); // reference to video tag

In above snippet it is expected that example_video_1 is id reference of video tag.

Some of the things thats not clearly evident are

Stop media(video or audio) download

Clear the source tag. AFAIK there is no event associated with audio or video tag which allows you to stop download of any source associated with the tag. When pause event is fired on the element, it merely pauses the audio or video but continues to download the associated media. To completely stop the media download, you would have to clear the src attribute. In VideoJs you would do it like

    app.p1.src('');

Note that above will make your player defunct, i.e you would not be able to play the media anymore, unless you associate back any media source to it.

Change Video Poster for already initialized Video.

In videojs changing poster can be done with something like below.

    $(app.p1.el()).find('video').attr('poster', 'http://media.w3.org/2010/05/sintel/poster.png');

Use same video element to play different Videos like Playlist.

Assuming that your playlist JSON is something like

    app.pls = [{
            title: "Ocean",
            url: "http://video-js.zencoder.com/oceans-clip.mp4",
            poster: 'http://video-js.zencoder.com/oceans-clip.png'
        }, {
            title: "Animation",
            url: "http://media.w3.org/2010/05/sintel/trailer.mp4",
            poster: "http://media.w3.org/2010/05/sintel/poster.png"
        }, {
            title: 'Ted',
            url: 'http://video.ted.com/talk/podcast/2013X/None/AndresLozano_2013X-light.mp4',
            poster: 'http://images.ted.com/images/ted/a94a473fdf524014a80d4bb19a4b159543679fa4_615x461.jpg'
        }
        ];

We would want to iterate over the list and associate relevant events to be able to play right media file and set relevant video poster.

    app.pls.forEach(function (item) {
        var title = $('<li>').html(item.title)
            .click(function () {
            app.changeSource(item)
        });
        app.plContainer.append(title);
    });

On change source event

    app.changeSource = function (item) {
        app.p1.pause();
        setTimeout(function () {
            app.p1.src(item.url);
            $(app.p1.el()).find('video').attr('poster', item.poster);
            setTimeout(function () {
                // Add some delay to show poster and allow previous js cycle to complete
                app.p1.play()
            }, 250);
        }, 0);
    }