mario 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]

• Blog , Tech
• Comments(8)