Heyo!

Straight to the point, I just want to show you how to play an html5 video.

First of all, there are some tools which will make this tutorial easier. I am using the http://videojs.com/ . This library allow to load and play very well videos with html5, but as always our friend html5 is nothing without it’s best friend javascript. I will show you some tricks I have learned these last days to make it play properly and also play multiple videos at the same video player.

Playing the video

First of all, download the tool or just use the absolute path to the live code, if you have internet connection. I am using the absoute path as below within my head tag.

Once you have it done, just add a div into the body, and inside of the div add another tag, called video as showed below.

Alright, pretty good, now you have to add some attributes to this tag to make it happen.

Now, you should be asking yourself, what the hell is this? Alright, not a big deal, really. I’ll explain attribute by attribute.

id = the ID name to the video.
class = the style for the video player skin, it is customizable, you have to have the .js.css file in your computer to change it.
controls = are the controls for your skin.
preload = you know what is a preload, right?
width/height = you know as well.
poster – it is the image that will show up before play the video.
data-setup = you can use the data-setup attribute to provide options in the JSON format. This is also how you would set options that aren’t standard to the video tag.

Okay, almost done with the video tag, there is only one more thing to be done, the video sources. That is where it gets more tricky.

You should use three different video formats to play on all browsers. They are webm, ogv and mp4. There are a lot of conversors out there, choose yours. So then, the final video tag code is…

Okay, send it to your server, you should have it working when hit the play button. BUT, for couple servers we will figure problems in Firefox. Why? We have to change the .htaccess file. DON’T FREAK OUT, it is the easiest part of this tutorial, really. Just create a plain txt or rtf file and add what is below.

# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm

Save it locally and then, upload to your server (same folder which the video.html was uploaded), once it is uploaded, rename the file to “.htaccess”, it gets hidden in some ftp clients, I’d advice to use the cyberduck, where you can see hidden files.

Ok, access your html and play it, it should play at any browser.

Playing multiple videos

This second part I’ll use Javascript to change the src and add another videos to the player.

Create a javascript file called videoHandler.js and save within your project. Here we gonna put the code to handle this video tag.

First of all, let’s create the variable that will get the element by ID.

var myVideo = _V_("my_video_1"); // get my 

Now we create the listener to know when the video is complete and the call for the new video.

var myVideo = _V_("my_video_1"); // get my videojs.
function onComplete(){
	var myVideo1 = document.getElementsByTagName('video')[0]; // get my 

Make sure the javascript file was added to the html file at the very bottom, before the body tag has been closed.

You can find more info about the videojs at their website VideoJS

Browsers tested:

Windows: IE9, IE8, Chrome, Firefox
Mac: Chrome, Firefox, Safari
Android: Firefox

Final Example:

HTML5 VIDEO

Final Files:

Final fles at github