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
Screencasting is also useful if you’re having PC issues and need tech support – by recording your screen as you step through a problem, you can show the techie exactly what goes wrong where, and you’ll give them the best chance of helping you resolve the issue.
