Category: Tech

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]

On a recent trip to Seattle, I once again realized just how amazing it is to live in The Friggin’ Future. With an iPhone 3GS (basically an extension of my arm at this point), I was able to:

•get walking directions from airport to hotel, around the city and back again, including light rail and bus routes with scheduled times (Maps, OneBusAway)
•consult user-submitted restaurant recommendations (Yelp)
•track spending (iBank)
•record the entirety of a concert (Camera) (don’t worry, it was w00tstock and was released under a Creative Commons license)
•keep hundreds of friends and well-wishers up to date up to the minute on happenings (Tweetie)

(I didn’t even get into really fancy stuff like geotracking the whole trip via Dopplr, mostly because I only just discovered Dopplr today. I TOTALLY would have though)

As much as this sort of thing has become commonplace, I can’t help but stop and marvel at times. It wasn’t terribly long ago that the notion of a pocket-sized device that could accomplish all these feats was in the realm of science fiction. But even the tricorders of Star Trek future history are primitive when compared to what has actually been created. The creators of that program could not have conceived of a worldwide network with virtually unlimited information at our fingertips (if you recall, most Treks had all their data stored locally on computers onboard their starships, basically servers with warp drive; I suppose if your ship can outrun data transfer speeds, a long-range Wi-Fi network might become a thing of novelty… but as is so often the case when Star Trek comes up, I digress).

Though I didn’t realize it when I bought my first iPhone in 2007, the device has become an absolute necessity in my life. It is my lifeline to the outside world on a level of profundity that a landline telephone could never hope to achieve. True, it has been a steady source of content consumption as my portable car stereo and TV (though the iPad has taken over the latter function with gusto), but it’s also the primary connection through which I socialize with a myriad of friends and well-wishers online. Some might express concern at eschewing real relationships for so-called “fake” ones with Internet folk, but I fail to see the distinction when the only difference is the means with which we communicate.

I’ve been obsessing a bit lately over one Amber Case, cyborg anthropologist, futurist and Singularity enthusiast (so perhaps you can understand my obsession). She argues that everyone in this modern age is a cyborg, as we all utilize technology to some degree to augment our physical bodies. It’s a compelling thought experiment (see more in her entertaining and informative lecture on prosthetic culture), and I hope it makes everyone realize the importance of devices like the iPhone (or your brand of choice) in their daily lives. Technology interconnects us on a deep level, and connects us all to something much bigger than ourselves.

And it’s exciting to live in a time where we can take it for granted. That’s when you know it’s The Friggin’ Future.

Oh yeah, add another bullet point for:

•update blog (WordPress)

[discuss]