HTML5 is quickly becoming the go-to markup language for the web. One of the biggest improvements over it’s predecessor is in the way it manages media, specifically video. This <video> tag provides a simple way to quickly embed video on your site.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Most modern browsers know exactly how to serve this content and will wrap the video with the necessary player elements.
One problem that you would come across though, is if you were to view this video in Chrome and Safari, you would notice that the player doesn’t look the same. The controls are different, the layout is different and features are missing (or in some cases, added). And what if you were to view it in an older browser? Well, many versions of Internet Explorer would skip over the video because they wouldn’t understand the HTML5 code. That could mean your users could completely be bypassing your content. Yikes!
Video Played in Chrome
Video played in Safari
Fortunately, Video.js is here to provide a one-two punch in the HTML5 media department. Video.js combines the simplicity of HTML5 with a powerful Javascript API.
Video.js provides a consistent player experience no matter what browser you’re using. Visually speaking, the player itself will appear the same across all browsers. This is a huge win in the usability department.
Now let’s talk about a dirty word in the modern web world…flash. Yuck! But you know what? It’s not all doom and gloom. Video.js will determine whether or not your browser is compatible with HTML5. If it isn’t compatible, Video.js will automatically wrap the video in a flash player container. That means user’s viewing your site with Internet Explorer 7 or 8 will still be able to watch the video. This solution is deployed when it’s the only option available. This switch happens automatically which means you don’t have to mess around with any additional embed codes or player files.
It’s really a snap to add Video.js to your site. Either download the files here or use their provided CDN links. Also make sure to check out their Getting Started page.
And that’s it! Now all of your HTML5 video content will be beautifully wrapped with a consistent player experience with graceful fallbacks.
Do you work with video on the web? Have you used Video.js before? Do you use an alternative solution? Let me know in the comments!