Using The VideoJS HTML5 Video Player Properly

VideoJS is an open source HTML 5 video player designed to give you cross browser compatibility for all of your HTML 5 video needs. The options include volume control, customization through CSS3, and even a full screen option, which at its core HTML 5 video will not offer. VideoJS is, completely free, and is the easiest way to have a dynamic video player without all of the headaches. I am going to run you through the steps you need to take in order to get this to work, the limitations, and give you a step by step guide helping you bring your videos to life!

For this particular "how-to" the first thing you will need to do is visit the VideoJS homepage.
You will see a "download button" off to the right hand side of the page. Click that, and then once it is finished downloading you must unzip the file. Afterwards you are going to be looking for the files "video-js.css" and "video.js."

You are going to want to move these into the correct place, depending on your file structure or how you want to link to them.
Before all that you might want to test this. You can do so by simply creating an HTML document with the basics. Add the video code they give on their homepage, and you can test with either the sources they provide, or use your own video.

Once you have your document set up you are going to need to copy the snippets of code used to link their CSS and Javascript. You can directly copy this without updating anything in particular, assuming you keep the original file names the same. After that, you are going to want to copy the script they supply you that can also be found towards the bottom of their home page.

After you have done everything correctly you should have VideoJS working on all browsers, with the same theme, and the same functionality. You can change various skins, poster images, dimensions, and you can use any various fallback content you want. You can even use your own flash player, and keep the same theme by leaving the class as is.

Just in case this article was a little bit hard to follow I have made a short tutorial video, walking you through the steps in real time….
Note: Fullscreen= Full "window" on all browsers except safari.

The advantages of VideoJS are endless. You have fully functional HTML 5 video player, that is consistant across all browsers. Add that to the fact you now have the ability to reach mobile users and your videos become that much more vital. You also have a Flash fallback option, but HTML 5 video first and foremost is important for a few reasons. One, your job becomes easier. HTML 5 video is easy to use, update, and implement on your site. Second, HTML 5 is great for search engines to properly index your videos. You don't want Google unable to identify your content for what it is. With HTML 5, you have SEO friendly code. When you combine that with clean cut coding, and a link building service, you can be confident the SERP's are in your future.
Hope that everyone enjoyed the short tutorial, and hope to see some of your videos online!

Author Bio: This article was contributed by Thomas Benjamin. Thomas enjoys bloggin about many various internet related topics including HTML 5. He works with many sites providing the best white hat SEO services.

 Subscribe to the Technology Category from TubeBlogger! You'll get the latest stories by RSS - The latest posts tagged "Technology" - by email or in your favorite RSS reader.