Monday, February 20, 2012

Interactive HTML5 Video

So a good friend of mine who does video capture/editing for a living hit (Adam Kitter Media) me up the other day asking about interactive videos. In his opinion, they are the future of video online. Based on things I've seen online, I do not disagree. So he was asking me if I'd be interested in perhaps doing some of the programmatic work. Having no experience with video, I said I'd have to do some research on it. However, what I could say with certainty at that point was that there are two main video formats right now: Flash and HTML5. Since Flash is slowly being phased out, I told him the way to implement it should be HTML5.

Like video, my experience with HTML5 was almost zero so I had to learn some of things required. The first thing I learned was that putting a video on a page with HTML5 is very easy! Honestly, I spent more time trying to locate a video file in .mp4 and .ogg on my computer than getting the thing to work.

Code required to play a video in HTML5:
< html>
    < body>
        < video id="theVideo" width="480" height="360" controls="controls">
            < source src="fileName.mp4" type="video/mp4" />
            < source src="fileName.ogg" type="video/ogg" />
            Your browser does not support the video tag.
        < /video>
    < /body>
< /html>


The keen observer will note, that there are two video files within the video tag above. In the perfect world, one file format would work for all browsers (hehe or there would one browser to rule them all), however we do not live in a perfect world and not every browser supports all file types. As of this writing, the HTML5 video player supports three file types: MP4, WebM, and OGG. A combination of two of those file formats should cover all the major HTML5-supporting browsers (IE 9+, FF 4+, Chrome 6+, Safari 5+, and Opera 10.6+). If I use the code snippet above as an example, Safari loads the .mp4 video just fine, but Firefox does not and it falls back on the .ogg file. If the browser supports none of video files or does not support HTML5 video, you will get the error message.

The code snippet above isn't very interactive (minus the play/pause button), so I began looking for ways to move about the video to make it "interactive". For a first-pass implementation, I decided to create a set of "buttons" that allow the user to jump around the video (read: colored divs with onclick events).

For this implementation, I made use of two important time fields: currentTime and duration (there are others). Both are fairly self explanatory, duration is the length of the video, and currentTime is the time index the video is currently on - both values are seconds as counted in floats.

From my research, I gathered that there are a number of ways to implement the "buttons" I wanted. However, I decided to use jQuery to handle the onclick events. Basically, I had each button adjust the currentTime attribute to a different point in the movie (beginning, 1/3, 2/3, end).

$('#link1').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = 0;
});

$('#link2').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = (video.duration - (video.duration * 0.666));
});

$('#link3').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = (video.duration - (video.duration * 0.333));
});

$('#link4').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = video.duration - 1;
});


Once I had the time index changing working I just slapped a little styling on the buttons and voila! My first pseudo-interactive HTML5 video player. In retrospect, the most difficult of building this was locating a place to host the videos for this blog post.

I still have a ways to go before I'm up to the likes of these videos but at least I have something to look forward to:

My Interactive Video


FYI: The buttons work even if the video hasn't buffered yet, just look at the progress bar.

Jump to Beginning of movie
Jump 1/3 of the way into the movie.
Jump 2/3 of the way into the movie.
Jump to End the movie.


For my next experiment into HTML5 video, I'm going to do some more research into the canvas to see if I can't make the buttons right within the video.

No comments:

Post a Comment