Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

HTML 5 video: How to make a video work on web browsers

The tutorial is intended to present the users the techniques used so as to make the videos work on web browsers using HTML 5.

Making use of HTML 5 in order to add the video to the web page of your site is not as difficult as it seems. We have majority of the browsers that hold the potential to take care of the video tagged in HTML5. However the way any browser supports the video is different from other browsers. This means that with few lines of code and saving it in the supported video format makes it pretty easy to get the video displayed in majority of the browsers. The only browser that is exception over here is Internet Explorer 8.

Below lists the HTML 5 code that will make the browsers know on the incoming of HTML5.

<!doctype html>

Listing 1: Creating the Web page

<html>
  <head>
    <title>How to make a video work on web browsers - MrBool Tutorial</title>
  </head>
  <body>
    
  </body>
</html>

Video tag needs to be placed within the body as shown below:

<video></video>

The most important part is to make judgement on the attributes you want to include as a part of your video. Below lists dome of the attributes:

  • Autoplay is one such attribute which needs to be initiated the time it is downloaded.
  • A control is the next tag that has the capability to permit the readers so as to take control of the video. This is done by making use of pause, rewind and fast-forward elements.
  • Loop is the attribute that is used to initiate the video from the very start until the video is ended.
  • In order to do the pre downloading of the video which will make the video to download as soon as user accesses the video, the preload attribute is made use of.
  • Next comes in the turn of poster attribute which is used to define the image that is required to be utilized at the time when video is stopped.

Below we can see some example of HTML5 Video

HTML5 Video Example

Figure 1: HTML5 Video Example

The recommendation is to make use of controls as well as preload attributes and when we make use of poster attribute, it means that the first scene of the video is not of the expected quality.

<controls preload></video>

The next step is to incorporate the below code within the <video> attribute.

Listing 2: Incorporating the code within video attribute

<controls preload>
<source src="videofile.mp4" type='video/mp4; codecs="avc1.4E0, mp4a.40.2"'>
<source src="videofile.ogg" type='video/ogg; codecs="vorbis"'>
</video>

This is not the end of the road and requires to be validated across different browsers. The browsers include Chrome 1, Firefox 3.5, Opera 10, and/or Safari 4. So open the page in these browsers and we need to make sure that correct display is visible.

The browser that is really required to validate the above code is at least Firefox 3.5 and Safari 4. This is for the reason that these browsers tend to have a different codec.

Post making this code in place, we will get the video that will work perfect in different browsers including Firefox 3.5, Safari 4, Opera 10, and Chrome 1.

The big question here is how to make the video support in Internet Explorer since vide tag is not liked by the Internet Explorer. Let us see how to make IE browser compatible with the playing of the HTML5 video. The very first thing to make use of the flash and talking about Internet Explorer 9, it is known to support all these hurdles that IE8 cannot.

The point to note here is that the flv file is missing the source line and in case the page is validated in IE, you won’t be able to see and display the video. The prime reason behind the same is the inability of IE to identify HTML5. It cannot play the MP4 videos and flash will be made use of in order to play the video in IE7 and IE8. Let us see some more detailed steps in order to make it work in Internet Explorer.

The very first step is to install a Flash Video Player. One can install any open source player available these days in plenty. This needs to be installed on the web server. This is made use of at the time when we have some Flash video to be played. This open source version of the player allows incorporating the advertising in the videos. One can also go for the official version of the player as per the requirement.

However post the installation of the flash player, you still won’t be able to make the video play in Internet Explorer. We need to make the IE know on how to identify the HTML5 tags.

The next step would be to make Internet Explorer confirm how we can read HTML5 tags. We need to make use of the script that would assist the Internet Explorer so as to identify the elements of HTML5. Therefore, the head of the HTML document that we are using, it needs to be referenced. The best would be to enclose the same in Internet Explorer and this would make the other browsers to avoid the confusion.

Listing 3: IE reading HTML5 tags

<!--[if IE]>
<script src="http://googlecode.com/svn/html5.js"></script>
<![endif]-->

This will help in recognizing the video tag but still we need to incorporate the source line for the file namely flv.

Just like we did above, here also it is required to incorporate a line to the HTML5. This is required to be added within the element. This would help in giving an indication on where the flv file is stored on the server.

Listing 4: Incorporating the line to HTML

<video controls preload>
<source src="videofile.mp4" type='video/mp4; codecs="avc1.4E0, mp4a.40.2"'>
<source src="videofile.ogg" type='video/ogg; codecs="vorbis"'>
<source src="videofile.flv" type='video/x-flv; codecs="video, video 2, H.264"'>
</video>

There is a lot more to be done than what we have discussed above. It is the turn now to make Internet Explorer know or make aware of the flash player that we installed above.

We will now make the video attribute to be turned into a flash which requires one more script and this would require the below adjustments to be made in order to make it work correctly and appropriately. We need to add the flash player location where we have installed it and then change the type of the file to x-flv. Additional adjustments are displayed below.

Listing 5: Adjusting elements to play video on Internet Explorer

If (!!$ && !!$(document).ready) {
Modify the section to read to the end of the document
//if (!!$ && !!$(document).ready) {
  /* With the ready of DOM, this can be initialized*/
// $(document).ready(html_video_start);
//} else {
  /* We need to wait for completion of onload */
  /* addEvent function via http://www.samplesite.com/blog/addevent/ */
  var addElement = function( type, fn ) {
    if (obj.addListener)
      obj.addListener(fn, false);
    else if (obj.attachEvent) 
      obj.attach('on', function() { return apply(obj, new Array(window.event));});
    }
  addEvent(window, "onload", html_video_start);
//}

Post the editing of JavaScript file, this need to be placed to the server. This is then linked to the HTML page at the bottom of the page. This is done just before the <body> element.

<script src="html-video"></script>

Time now to upload the HTML which would allow us to do the testing however make sure the pages are tested with the best of the browsers available these days. The browsers that really need to be tested in for your vide code are Firefox 3.5, Safari 3 or 4, Internet Explorer 7 or 8. This can be tested in Chrome as well however you need to have the plug in order to make use of the flash.

For the sake of making the code work, the code should be tested in earlier version of browsers. This needs to be done so as to see what they actually do when we have lot of users making use of the earlier browser versions.

Making the video work in earlier version of browsers requires considering the importance of the browsers you are working with. It all depends on the customers you are dealing with as to which is their favourite browser. Post you decide on the browser selection, the easiest route is to come up with another page so that the video can be displayed over there. On that page, the video will be embedded making use of earlier versions of HTML such as HTML4. You can then make use of some way that can detect your browser which will redirect you to the link of the page.

Conclusion

This tutorial was focussed to make the videos work on web browsers and especially on Internet Explorer. Hope this was useful.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login