If you have developed a website in the past few years, chances are you have come across the need to embed video. And chances are it has been a nightmare to get decent quality video that is compatible on the myriad of today’s browsers and mobile devices. Huge file sizes, video quality, content protection and mobile device compatibility are just a few of the issues that we developers run into when a client asks us to embed video into a website.
Below are a few tips I have learned that allow my grandma who is still using Internet explorer 5, my 5 yr old nephew using his iPod touch, and everyone in between to view embedded video.
- Start with a format that is widely supported — H.264 video compression is poised to become the next standard for format of convergence in the digital video industry now supported by Google / YouTube, Adobe, and Apple iTunes. It contains a number of features that enable it to compress video much more effectively than previous standards, and provides more flexibility for applications across a wide variety of network environments from low bit-rate Internet streaming to HDTV broadcast and Digital Cinema applications with nearly lossless coding.
- Outsource most of your encoding — Video encoding bogs down even the fastest computers and limits your ability to be productive for hours at a time. Instead, use a service like encoding.com to simplify and improve your encodings. With the use of encoding.com I am able to encode about 150-200 encodings of different quality settings in about the same time it would take me to create 3 encodings on my local computer. Another time savings comes from encoding.com’s ability to place my encoded videos right into my Amazon s3 bucket saving me even more time when I don’t have to upload all the files myself. Not only does encoding go faster, the quality is great at unbelievable file sizes.
- Encode wisely — Now that you have the resources to make as many encodings as you need, you can make 8 different levels of quality right? You could, but it is unnecessary. I suggest creating a High Def video, a Standard Def video (quality settings and file size should be about half the size of HD) and a “mobile” video(480×368 resolution). Using these three quality levels should allow you to accomodate the masses without giving all your profits to Amazon or some other CDN for storage/distribution
- Let your player do the heavy lifting — Flash vs HTML5, HD vs SD, mobile vs desktop. don’t waste your time figuring out which file to serve which device and whether to use flash or HTML5. There are players out there that do it all for you. I use and love JW Player. I use one set of code to embed my video and the player does the rest. Video works great on my iPhone, iPad and in my browser.
I have discovered these tips through living the nightmare of trying to get high-quality video to people all around the world with very different connection speeds.
This is by no means a comprehensive set of instructions on how to get high quality videos on your website, but my hope is it will get you on the right track. The two services I have recommended here (encoding.com and jwPlayer) are both extremely well documented and will be able to answer any questions you may have about implementing their services into your web development regimen.