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
Note: Only a member of this blog may post a comment.