How to create website friendly video

21 October 2013

How to create website friendly video

Adding cross browser compatible video to websites used to be a real pain. iPhones don't support flash, so flash video streaming is not an option. HTML5 video tag is implemented slightly differently among different browsers and the most popular desktop browsers at the minute don't support HTML5 video. Even those that do support HTML5 video require a different codec - Internet Explorer uses h.264, Google uses webM, Firefox and Opera support WebM and Ogg Theora. This means that if you want a video that will play in all browsers, you may need to create different formats of the same video- at the very least a h.264 format and a webM format.

Another issue with HTML5 is streaming support, especially RTMP which contains copy protection for the streaming video, although you can use progressive download, this does not prevent people from copying your video.

Fortunately there is help at in in the form of a great jQuery based video player called VideoJS. This is essentially a marriage of the cross browser Video for Everyone method - a pure html video embedding system - and the excellent FlowPlayer - a flash/jQuery based video player compatible with iPhones and iPads (using javascript browser detection to fall back to native iPhone video playing methods).

VideoJs works by using a HTML5 video tab with a fallback to a flowplayer flash video. you can set it to work the opposite way round if desired so you have flash which falls back to HTML5 video (my preferred option). Using the html5 video tag, you can set a number of different sources which work in different browsers - its recommended that you have at least h.264 and webM which should cover the majority of browsers. The flash video player will handle most video types so you can just use the h.264 video file here.

Internet Explorer can be made to support webM via third party software, but It's unlikely that mobile safari will support webM, so using webM as your only video source is not viable. H.264 is supported by IE, flash and iPhones so that covers most platforms, but with later editions of desktop and mobile browsers losing flash support, it is going to be more difficult to develop browser based video in a cross platform format.

What we need is for all platforms to support HTML5 video for both webM and h.264. This would mean that you could publish your video in either format and it would work across all browsers and platforms. Unfortunately, I don't see this happening any time soon, and the messy flash/HTML5/multiple codec method of embedding videos is likely to be the most viable solution for at least a couple of years.