Building an iPhone/iPad/Android compatible HTML5 video player – Part 2: Support for Multiple Videos

In part one, I showed you how to build a simple HTML5 video player. In part two, I will show you a way to create a simple video player that can display multiple videos.

Step 1: Processing the video covers and thumbnails
First things first, let’s process everything we will need for our player. Go ahead and export your videos in MP4 and OGG format and produce the poster images you will need (see part 1 for the steps on how to do this). Next, produce the thumbnails for each video. The size is completely up to you, and depends on how many videos you are displaying and the layout of your player.
Once you have your videos, poster images and thumbnails ready, place them all into your folder (mine is named “vids”) and continue on to step two.

Step 2: Linking to jQuery
I use jQuery on virtually every project, it is a great framework for adding functionality to your site. You can link to jQuery in two ways: 1) download it and host it on your server or 2) use the hosted version. For this project, I used the hosted version, here is the code for that (just add it to the head of your file):

Step 3: Adding the videos to your page
At this point, we what to put all of the code on the page that we need to show all of the videos plus the Flash version for IE. For my example, I will be using three videos, here is what my HTML code looks like:

Here is how the structure breaks down: we first want a containing div with an ID of “vids”. Within this, we want containing divs for each video (three in my case). I named mine “vid1”, “vid2” and “vid3”. Each of these divs will hold the HTML5 video tags with the MP4 file followed by the OGG one for Firefox. Within the first div (#vid1), we also want to put the Flash embed fallback code for IE. This should go within the first video tag, directly after our OGG video is listed, before the first closing video tag. If you were to preview your page at this point, you would see the three videos one after another (Chrome, FF, Safari) or the single Flash player (IE).

Step 4: Setting up the thumbs
Here is how my code looks for the thumbnails (this code immediately follows my closing div tag above):

My containing div has an ID of “vidThumbs”, within this are my three thumbnails. Notice they are all linked to my “vids.html” page, but for #2 and #3, I have added “?vid=number” to the end. This will come into play soon.

Step 5: adding the CSS
First, we need to set the CSS for the “vids” div:

#vids{
	width:640px;
	height:480px;
	background-color:#000;
	margin:15px 0 10px 0;
}

The next step is to add the CSS to style our thumbnails and give us the option of hiding the videos we do not what to be visible.
I decided to use a yellow border when my thumbnails were moused over and in their active state.
Here is my CSS for them:

#vidThumb1,#vidThumb2,#vidThumb3{
	display:block;
	width:118px;
	height:100px;
	border: #000 5px solid;
	float:left;
}
#vidThumbs a:hover #vidThumb1,#vidThumbs a:hover #vidThumb2,#vidThumbs a:hover #vidThumb3{
	border:#FC0 5px solid;
}
#vidThumb1.active,#vidThumb2.active,#vidThumb3.active{
	border:#FC0 5px solid;
}

So the thick yellow border will only show when I want it to. One note: be sure and set the initial border color to the background of your page if you are going to use this approach.
One last simple piece of CSS that will hide the 2 videos we don’t what visible when another one is active:

.hide {
	display:none;
}

Make sure to use display:none; rather than visibility:hidden: as they behave differently. We what to completely take the non-active videos out of the DOM.

Step 6: adding the Javascript
We want to make it so that the following conditions are met:
-if we are on vids.html page, we want to show vid1, make vidThumb1 active and hide the other two videos
-if we are on vids.html?vid=2, we want to show vid2, make vidThumb2 active and hide the other two videos
-if we are on vids.html?vid=3, we want to show vid3, make vidThumb3 active and hide the other two videos
The easiest way to do this is with a bit of javascript, here’s how it looks:

$(document).ready(function(){
    var query_string=document.location.search;
    query_string=query_string.split('=');
    var query_string_value=query_string[1];
	if (!query_string_value){
			$('#vid2').addClass("hide");
                        $('#vid3').addClass("hide");
			$('#vidThumb1').addClass('active');
		}
	if (query_string_value=="2"){
			$('#vid1').addClass("hide");
                        $('#vid3').addClass("hide");
			$('#vidThumb2').addClass('active');

	}
	if (query_string_value=="3"){
                        $('#vid1').addClass("hide");
			$('#vid2').addClass("hide");
			$('#vidThumb3').addClass('active');

	}
});

First we check that our page is ready, then we check for the presence of a query string in our url. Depending on the value, we show and hide the appropriate videos and make the selected thumbnail active. Note: it’s basically the same three “if” statements in a row, if I was making a player with more than three videos I would create a loop to make it easier to add videos later without having to touch the javascript.

So now that everything is set, we can click on our three thumbnails and show the appropriate video to play. I hope you enjoyed the tutorial on how to make a simple HTML5 video player, if you have any suggestions on how to make it better, feel free to let me know in the comments. Thanks for reading!

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.