Making HTML5 video easy with VideoJS and Zencoder
For a recent client project at Flag, we’ve done a lot of research into HTML5 video technology and after much trial and error (and pulling out of hair), we came to a very tight, clean solution which worked in modern web browsers, older web browsers (you know the one) AND mobile devices.
I won’t bore you with the arduous process and will fast-forward to our final solution.
VideoJS is an open-source HTML5 video player which utilises Kroc Camen’s Video for Everyone. It works across most platforms and devices you could ever wish to encounter and it’s function is to overlay the basic browser controls with some HTML mark-up meaning it is fully skinnable using CSS – very neat indeed. The player comes packaged with a few skins based on Youtube and Vimeo among others but we opted to modify the base skin to fit our client’s site design. After combining with the jQuery Thickbox plugin (I know it’s old but it’s still good!), we had a large HTML5 video in a lightbox, no problems whatsoever – fantastic stuff!
And then came the difficult bit – encoding the videos. As you may know, a HTML5 video implementation generally requires at least two video formats for it to work cross-platform. H624 (.mp4) is an essential format which is very widely supported and then one or both of WebM (.webm) and Ogg Theora (.ogg, .ogv) which are the open formats supported (and required) by Firefox. We decided to support all three.
Previously, I’d used Handbrake to encode videos but after many trials and tribulations attempting to encode videos to the three formats, I came to the conclusion that we needed to use an external service to encode our videos. After trying out a few services like Encoding.com and vid.ly, we arrived back at VideoJS and it’s creators Zencoder. Their main business is as a video encoding service and boy is it impressive!
After providing the video input URLs or FTP details, you are presented with a multitude of options for encoding your videos. Ordinarily, this would be a daunting task but the documentation provided by the team is incredibly helpful and they also write blog posts outlining common settings to use. A batch processing option is also offered which can speed things up considerably.
Their pricing structure is more than reasonable and they offer different levels depending on your video usage.
I’d also like to give a big shout-out to their support team who were fantastic. We had a few niggling issues getting videos to work correctly on Android devices and the support team were very responsive to our queries and sorted them quickly.
Zencoder also has a extensible API for fully integrating Zencoder to your website should your usage be high enough to warrant it.
In conclusion, if you’re after an easy to implement but highly customisable and cost-effective HTML5 video solution then I don’t think you can go wrong with Zencoder and their VideoJS player.
Over and out.
Leave a Reply