Integrating video sounds easy on paper. But believe me, it isn’t. Video formats are a complete nightmare and even a simple player is hard to integrate. In this post I will show you some important tricks that you will need in order to succesfully integrate video into your website.
HTML5 video elementIntegrating a basic video into your website isn’t all that complex. All you need to do is to add a video element with a source to your HTML. This will give you the standard video player offered by your browser.
It works in any modern browser, IE9+, FireFox, Chrome, Safari and Opera.
Video formatsThe fact that you see a video element in the browser, sadly does not mean it will play a video file of your choice. There’s a lot of video formats that are supported by different browsers. And to make things worse, there’s not a lot of overlap when it comes to supported video formats. The following page provides a neat overview of all the supported formats: https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats#Browser_compatibility
After testing things out, I’ve discovered that the following combo of formats works on all browsers:
- MP4/M4V - Works on Firefox, Chrome, Safari and IE9+
- WebM - Works on chrome and Firefox, but not on the others.
Note: Although WebM doesn’t work out of the box on IE9 and Opera, you can get it to work with a separate plugin in the browser. If you like sensible options and don’t want to bother your users with plugins, you go with the MP4 route ;-)
Encoding your videoWhen encoding videos for the web, make sure you encode your videos in a web optimized format. I personally like Handbrake the best for encoding videos for the web. To encode videos in a web optimized format with Handbrake, you will need to follow this guide:
- Open Handbrake and load the video source file
- From the Apple presets choose “iPhone & iPod Touch”
- Make sure you check the “Web Optimized” checkbox, which will make your video load much faster
- Set everything else that you want for your video
- Click “start” to start the encoding process
With these settings you end up with files that you can drop on the webserver and play right away. The web optimized flag will move the video header to the start of the file, so that the browser recognizes the video and starts playing, as soon as it receives the first chunk of data from the server.
Hosting your videoSpeaking of receiving chunks. To get the best results, make sure that your webserver, serves the videofiles as Video/MP4 (for both m4v and mp4 file formats). IIS7 doesn’t contain these mimetypes. But once you add them, it does a great job at delivering the videos in a chunked format so that browsers can play them without downloading the whole file first.
More browser compatibilityThe standard video element works for modern browsers, but there are still people out there with browsers that don’t support the video element, like IE8. For these visitors, you will want to provide an option to make things backwards compatible.
There’s a neat script available over on videojs.com that makes your video compatible with older browsers. Follow the guide on the website and you have a much better experience.
Making the video responsiveVideo.JS is a great script, but it does lack a lot in the responsiveness department. I found that if you don’t specify a width and height for the video, you will end up with a poststamp sized video element of 300x150 pixels. Why it’s so small is beyond me, but there’s a fix for that.
For the fix to work, you need to get and compile video.js from my personal github repo: https://github.com/wmeints/video.js This repo contains a fix for the size problems that video.js has.
To compile the script, make sure that you have java.exe in your PATH and node.js installed on your computer. With these two components installed, run the following commands:
This will install all the required dependencies for the video.js script, install the grunt commandline and run grunt to build the script. After that you should have a video.js in the dist folder that you can use.
The next step is to make the video element responsive. For this you need to add the following bit of CSS to your stylesheets:
After this, your video elements are responsive, so that you can play the video on large screens and on mobile devices such as iPads and mobile devices.