24 Oct 2011

VideoJS - The Open Source HTML 5 Video Player

If you are like me then you were very excited about HTML 5's video tag. Simplistic, great functionality, and now it is even supported by all of the latest browsers. Video is just a source away, and easier than ever to portray high quality videos right on your website. HTML 5, like anything else, doesn't have everything we want. For example the biggest problem is a "full screen command." Even though you are able to specify the dimensions appropriately, you still want to be able to save space, and provide that option. Early on there were a number of options available to have a deluxe video player. There seems to be a frontrunner in this battle, and that is VideoJS.

VideoJS is a free open source player that includes everything you need for your HTML 5 video. It features a lightweight, easy to use design complete with controls you would like, including volume and fullscreen options. It is supported by the latest browsers including IE9, and Opera. It even supports devices like iPad, iPhone, and Android. Another great feature is the automatic fallback to Flash that it features that will give you the same quality video for IE6,7, and 8. This is essential if you want everyone to be readily available to see your video. You also have the option to chose from various "skins" to get your video looking just the way you want it. If you have enough talent you can even create your own skin using CSS. Lets take a look at how all of this works.

The first thing that you need to do is go to www.videojs.com. VideoJS acts in the same manner that jQuery does for Javascript, so if you have any experience using jQuery then this should be a familiar process. You have to download the latest version of VideoJS, unzip it, and then upload it to your server. Then they have simple code, on their homepage that you will need to copy and paste in order to have it working correctly. First you need to copy the script, and css links, and place them in the head of your HTML document appropriately. Next you need to add some Javascript that has already been coded, that just lets the browser know to trigger the VideoJS once the page has been loaded. Then the video for everybody just needs to be appropriately placed in your HTML, change the sources, and you can optionally include a Flash fallback if you want to. That's it! now you have perfectly operating video, that everyone can see. Just make sure you have the correct sources for your video, and for your references of Javascript and CSS.

Even with the ease the VideoJS has provided, some may not see the need to use this. There are a few important reasons why you should be using an HTML 5 video player like VideoJS. First, you are able to reach a wide audience through the dynamic compatibility the HTML 5 video player has to offer. This will ensure that you are reaching mobile users, and users of various web browsers. Another reason is this video player offers the great features of an HTML 5 video tag, with the options of customizable skins, and full screen options. Then you can also add a fallback Flash player for browsers that do not support the HTML 5 video tag. This is done automatically, so there is no need to create a browser detector with corresponding hack. Finally VideoJS will be great for SEO. Google has a pretty big problem segmenting Flash videos, which makes it harder for you to be seen in the SERP's. You used to have to make extensive site maps, but now the video tag is easily identified, and you can even add a title to describe the media. If you combine this with a white hat link building service, you will defiantly have a boost in traffic.

The VideoJS HTML 5 video play is an all in one solution to your video problems. You have cross browser compatibility, both with your videos, and with the look and feel. This allows you to reach a wider audience, and allows you to easily be seen by the search engines. This is the simplest way to have a fully function video player on your website, and even with the additional fullscreen option. VideoJS lets you incorporate fallback options for older browsers in the form of a complimentary Flash player. Try VideoJS once, and you will not be disappointed.

This article was written by Ben Anderson. Ben is a freelance web designer who has been working with HTML 5, and is seeing the results first hand of the SEO Benefits

15 comments:

  1. The website is down for right now but it sounds great!

    ReplyDelete
  2. @Jonquil:
    Site is working fine for me. Please check your connection.

    ReplyDelete
  3. I've gotten to play around with Video JS and I have to admit, I really liked it. Thanks for the info (I didn't know so much about it).

    ReplyDelete
  4. I think it's weird calling software "technology".

    ReplyDelete
  5. I love html 5 cause make the web faster with out using any kind of plugins.

    ReplyDelete
  6. @mensajes:
    Yes, HTML5 doesn't require plugins. But it requires good browser. Not all users do have good browser yet.

    ReplyDelete
  7. Thats righ ! Mozilla and chrome are using Html5 , But the big problem for some users is that their pc ram is to slow .

    I love html 5.

    ReplyDelete
  8. @laptops:
    Sorry, but that's not an issue of HTML5. These low-memory computers would not be able to use Flash version of video either. I successfully run Chrome on laptop with 1Gb of memory. Haven't seen anything less powerful for ages now.

    ReplyDelete
  9. I agree! But I do consider HTML5 to be more than just the spec that the W3C validator checks your document against. Part of html5 music player involves standards for bolt on technology including web workers, CSS3, server sent events, etc. that are going to (I hope) revolutionize the web and do away with the need for 3rd party browser plugins

    ReplyDelete
  10. I am exicited about HTML5 but Flash can do all these things html5 can do in a better way.Creating slideshow in HTML5! wow! what, flash did that 10 years ago! It is very easy to create a flash animation, for example a ball bouncing in flash professional in less than am minute. Javascript is a mess when compared to AS3.

    ReplyDelete
    Replies
    1. It's war of standards, you know...

      Delete
  11. Thank you very much for sharing this, I've been using HTML 5 ever since it came out.

    ReplyDelete
  12. cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 player

    ReplyDelete