Make HTML 5 Video Work in All Browsers Including Mobile

via Make HTML 5 Video Work in All Browsers Including Mobile | Blackstone Blog.

There are a number of post circulating the web on how to make the HTML5 video tag work… but most of them focus on either desktop browsers, or how to get HTML5 video working in a mobile browser. No one had straightforward steps on how to make HTML5 video work in every browser AND the major mobile browsers. Never fear, I have pieced together code and tricks from many different resources and have compiled a complete step by step process to getting HTML5 video working across all browsers.

Step 1: Obtaining The Required Video Formats

You will need your video to be in five separate formats: *.webm, *.ogv, *.mp4, *.m4v, …and a flash format of your choice, either *.swf or *.flv. I will explain why these are needed in the future.

My original video file was in *.flv format, and I was able to convert it to *.webm and *.ogv using Miro Video Converter, it is a free program. You can download it here: http://www.mirovideoconverter.com/

Miro Video Converter can also convert to the *.mp4 format, but Firefox had trouble with Miro’s version of the *.mp4 video. To convert a video file into the *.mp4 format that works well in Firefox, I had to get the VLC Media Player. It is also free, you can download it here: http://www.videolan.org/vlc/

Once you have the VLC Media Player, it takes a couple steps to convert your file into the correct *.mp4 format.

  • First: click on Media > Convert/Save > Add… then browse to your file and click open
  • Second: click the “Convert/Save” button at the bottom
  • Third: Make sure the Settings Profile is “Video – H.264 + ACC (MP4)”
  • Fourth: Choose your destination file
  • Fifth: Click Start

To obtain the *.m4v format, we must download iTunes. Once iTunes is open, add your video to your movies / video library. Click on your video in iTunes and then click on Advanced > create iPod or iPhone Version (you may be able to guess why we need to do this step). iTunes will automatically create a file in the same place the original is (if iTunes manages your files, then it will be in My Music), but it will have a *.m4v file extention.

You can download iTunes here: http://www.apple.com/itunes/download/

You have many options when it comes to the flash format. You can use Adobe Flash to create a default video player and *.flv file. Or you can install something like Flowplayer and use that to play your *.flv file. I use Adobe Media Encoder to create my *.flv files.

Now we have all the files necessary.

Step 2: The HTML5 Code

Here is an example of the HTML code you will need.

<video id=”video” autobuffer height=”280″ width=”320″ controls=”controls” poster=”poster.jpg”>

<source src=”MVI_0010.webm” type=”video/webm”>

<source src=”MVI_0010.ogv” type=”video/ogg”>

<source src=”MVI_0010.mp4″>

<source src=”MVI_0010.m4v”>

<object type=”application/x-shockwave-flash” data=”images/10-technician.swf” width=”320″ height=”280″>

<param name=”movie” value=”images/10-technician.swf” />

<param name=”wmode” value=”transparent” />

</object>

</video>

It is fairly self explanatory. Your video tag contains the height and width of your video, the controls attribute tells the browser wether or not to display playback controls, and the poster is a path to a static image that appears before you click the play button.

The next four tags are the source tags. How HTML5 video works is the browser will step through those source tags till it finds a format it likes, then display that one. The *.ogv file is for Firefox, the *.mp4 file is for Chrome and Safari, and some mobile browsers, *.webm is an open source video format for some mobile browsers, and the *.m4v file is for the iPhone, iPod Touch, or iPad.

Now currently internet explorer does not support HTML5 video. So that is why after the 4 source tags you see I have included my *.swf file (my *.swf file loads my *.flv file). Internet explorer does not understand the video or source tags so it completely ignores it and just displays my flash object.

I wish I could tell you that this was all you needed. Sadly, this is not the case. While the above html code works well in desktop browsers… mobile browsers need some help.

Step 3: The JavaScript Code

The first step is determining whether our page is being viewed by a mobile browser or a regular browser. This involves a lot of looking for key words inside of the user agent and I won’t bore you with all the details. I have included the JavaScript file for you that does the grunt work for us. You can download it here.

You must include this *.js file between the head tags of your page.

<script src=”mobile.js” type=”text/javascript”></script>

Now comes the final piece of JavaScript you will need:

<script type=”text/javascript”>

if(DetectIphoneOrIpod() || DetectS60OssBrowser() || DetectAndroid() || DetectWindowsMobile() || DetectBlackBerry() || DetectPalmOS()){

var video = document.getElementById(‘video’);

video.addEventListener(‘click’,function(){

this.play();

},false);

}

else{

var clicked = false;

var video = document.getElementById(‘video’);

video.addEventListener(‘click’,function(){

if(clicked == false){

this.play();

clicked = true;

}

},false);

}

</script>

Place this code after your video tag.

First our JavaScript is checking to see if we are using a mobile browser. The functions that the if-statement is calling are inside of the mobile.js we added earlier. If any of those return true, we run the first piece of JavaScript. What that JavaScript does is find the video element on the page, and listens for when we click on that video. If the video element is clicked, then we play the video. Why we set it up this way, is if you are viewing the page on a mobile phone, and that play() function is called, the phone will intercept it and play the video inside of the phone’s native video player app. It is better to view the video in a video app than trying to zoom in on a video inside of a little mobile browser.

However, this poses some issues for desktop browsers.

Back in our HTML code, remember how we added the “poster=’poster.jpg’”? For usability purposes on a mobile phone, it is good practice to add a big “play” button on top of that poster image, so when you are viewing the page in a mobile browser, you know to click on the poster image to start playing the video in your video app.

You also see the poster image in the desktop browser. The “play” button on top of the poster image makes you think that you should be able to click on the poster image and the video would start playing. This is not the case, browser HTML5 video players do not support the functionality of clicking inside the video window to start / pause the video. We can add the same play() JavaScript function to our video element to get this effect though.

But… the problem with just adding the play() function is that when you click on the video controls (i.e. play button, volume, etc.) you are also clicking on the video element, which calls our play() function. So for example, if the video is paused, and you click on the play button in the control bar, it will actually call the play() function twice.

But if you remove the play() function entirely, people will click on that poster image thinking they can play the video because it has the big “play” button on top of it, but alas nothing will happen.

So what we want is the first time you click on the video / poster image, for the video to start playing, because then the poster image with the play button on it will go away, and people will use the control bar from then on.

This is why in our JavaScript we initially find out what type of browser the person is using. For mobile browsers, whenever they click on the video it will call the play() function. For desktop browsers, we set our variable clicked to equal “false”, then if someone clicks on the video, we check to see if clicked is false, and if so, call the play() function. At this point the poster image with the big play button is gone, so we also set clicked to equal “true”. So next time we click on the volume controls on the video control bar, we don’t call our play() function.

HTML5 needs to get its act together so including video on your website isn’t so much of a hassle. I put together these steps after hours of trial and error and figuring out what works and what doesn’t work. If anyone has some comments on how to do things more easily please let me know, however I never found one single simple way to get it to work well in every browser, desktop or mobile.

*by “all” I mean most… good luck trying to get it to work in every single desktop and mobile browser.

Advertisements