HTML5 Video Playlist: A Brief Kludge

June 1st, 2010

Twitter buddy @adecelle issued a challenge:

The listing in question describes how to replace an HTML5 video source in sequence; basically, it lets a single <video> tag change its movie in the course of playing the video, resulting in a YouTube-style playlist. Problem was, in the form presented on the site, there was no intuitive way to add x more videos, and the second video in the sequence would loop forever. It had been awhile since I had gotten to practice some coding, so I figured I’d give it a go.

As it turns out, this was a difficult nut to crack. My repeated Google searches on how to construct an HTML5 video playlist yielded a handful of code examples from various sources, but these examples were apparently written completely off the cuff and were more broken than the Apple code. Eventually I had to cobble snippets from multiple sources to make a functional output with the desired capabilities:


<script type="text/javascript">

function myEndedListener(){
var myVideo = document.getElementsByTagName(‘video’)[0];
myVideo.addEventListener(‘ended’,myNewSrc,false);
}

function myNewSrc() {
var myVideo = document.getElementsByTagName(‘video’)[0];
myVideo.src=”videoplaylisttest2.m4v”;
myVideo.removeEventListener(‘ended’,myNewSrc,false);
myVideo.load();
myVideo.play();
myVideo.addEventListener(‘ended’,myNewSrc2,false);
}

function myNewSrc2() {
var myVideo = document.getElementsByTagName(‘video’)[0];
myVideo.src=”videoplaylisttest3.m4v”;
myVideo.removeEventListener(‘ended’,myNewSrc2,false);
myVideo.load();
myVideo.play();
myVideo.addEventListener(‘ended’,myNewSrc3,false);
}

function myNewSrc3() {
var myVideo = document.getElementsByTagName(‘video’)[0];
myVideo.src=”videoplaylisttest4.m4v”;
myVideo.removeEventListener(‘ended’,myNewSrc3,false);
myVideo.load();
myVideo.play();
}

</script>

<video controls src=”videoplaylisttest1.m4v”>
</video>

Example site (H.264 videos in MP4 containers; YMMV)

I was particularly proud of finding the bug on the Apple developer page: the event listener keeping tabs on the ‘ended’ state of video playback (when the video reaches its end) was reloading the same video over and over again when playback concluded. It was on the Opera Developer Community page that I found the solution in removeEventListener() (their multiple video example, for the record, was fairly unusable as well, but I appreciate their help in coming up with a solution).

The end result is messy code, to be certain. I’m fairly confident that someone more technically savvy and JavaScript-fluent could come up with a cleaner solution, but as Paul told me, the important thing is that it fulfills the function (tested on Safari 4.0.5 for Mac OS X Snow Leopard and MobileSafari 3.1.3 for iPhone 3GS; the initial autoplay doesn’t work on the iPhone but the sequential JavaScript fu works like a charm on both).

“Why post all this JavaScript/HTML5 stuff on your sporadically-updated blog about video games and stuff?”, I hear you ask? Simply put, I wanted to add something to the search results pool in the hope that someone else can stumble upon this tiny corner of the Internet and benefit from all this legwork. Good luck, wayward e-vagrant!

[discuss]

8 Responses to “HTML5 Video Playlist: A Brief Kludge”

  1. Rezlon 20 Jul 2010 at 1:52 pm

    This is AWESOME!

    I’ve succeeded in getting a two video sequence where the last one loops here:
    http://www.heartlandpokertour.com/index3.php

    Although, I’m having trouble adding extra sources for the second video. The original listing in question is able to do this, but I’m not sure if it can work with your method?

  2. Alexon 16 Aug 2010 at 8:40 pm

    Thanks for the code, I am good at javascript, but we can do some thing like this:

    var playlist = new Array();
    playlist[0] = “videoplaylisttest2.m4v”;
    playlist[1] = “videoplaylisttest3.m4v”;
    playlist[2] = “videoplaylisttest4.m4v”;
    var playIndex = 0;

    // listener function changes src
    function myNewSrc() {
    var myVideo = document.getElementsByTagName(‘video’)[0];
    if(playIndex >= 2) playIndex = 0;
    else playIndex++;
    myVideo.src = playlist[playIndex];
    myVideo.load();
    myVideo.play();
    }

  3. Alexon 16 Aug 2010 at 8:43 pm

    Sorry I am trying to say I am not at javascript. It works on my iPhone, but not on my iPad.

  4. Amberon 07 Nov 2010 at 4:23 am

    Mario!
    I just stumbled upon the code you helped me out with while researching other video player stuff. It’s great to see you offered up the solution to the net, hopefully as you mentioned it will help someone else out as well!

    Thanks again,
    Amber ( @adecelle )
    : )

  5. Ellaon 19 Oct 2011 at 4:02 pm

    Thank you so much for posting this! Though, I am curious — how can I remove the event listener from the last video in the playlist while resetting it to the first?

  6. freshon 30 May 2012 at 2:39 pm

    HOLY SHIT!!!!! why didn’t I come up with this?? THANK YOU! i’ve been googling like crazy until I finally found this tutorial!! i’ve added up to 13 videos and put it on a constant loop only using the remove and addEventListeners thanks so much!

    btw: do you happen to know how to let the videoplayer play randomly picked videos? You see i got this fullscreen html5 video on the background and I want it to play random videos everytime someone refreshes the page.

    anyways thanks again!

  7. pabloon 21 Mar 2013 at 3:48 pm

    Thanks. I’m using this to play a bunch of videos on a usb stick we’re handing out to promote a non-profit. How do I get it to loop from the last video to the first?

  8. Etteon 24 Apr 2013 at 5:54 pm

    Could you add a “random” to the playback sequence somehow? I would need something like this: First clip definite, then the rest in the sequence is random. I’d appreciate your help and YES, I’ve found it useful since the previous solution I’ve got repeated the “sequenced” clips in a loop non-stop. This one solved that problem, however, I would need the sequenced clips in a random order. Thank you very much and GREAT WORK! 🙂