- 24
- December
Cross-platform solution for video playback. The silver bullet.
At least once in your life you have asked yourself a question: how do I make videos posted on my website play on every browser and hand-held device? Flash is going away as a platform for video, more so companies like Apple and Microsoft took a public stand against Flash. Is there a format that could fit web, tablet devices and smartphones?
An easy solution to this problem would be uploading the video to YouTube or Vimeo. These services have built-in apps in every major hand-held OS. Whenever you click a YouTube video on a tablet or smartphone, the app takes over and plays the video. This solution has an additional benefit of cross linking back to your website from YouTube.
But what if you don’t want to host your video outside of your website? What if the website is for offline/internal use?
The solution to this problem is HTML5. It beautifully embeds videos right into the website with native <video> tag and even has it’s own default player. The need to serve different file formats to different platforms still persists, but with HTML5 you can have one player that defines which platform made the request and serves correct format. Basically, you need to have the video in h.264 and at least one other format to cover your bases.
Here’s how the code should look like:
<video controls=”controls” autoplay=”autoplay”>
<source src=”pics/video/gizmo.mp4″ type=”video/mp4″ />
<source src=”pics/video/gizmo.webm” type=”video/webm” />
<source src=”pics/video/gizmo.ogv” type=”video/ogg” />
Video not playing? <a href=”pics/video/gizmo.mp4″>Download file</a> instead.
</video>
I have to say that this solution will still cause problems with IE7/8, but starting with IE9 it’s going to work fine. There is a way you can still make this work in IE7/8 with additional javascript magic, which you can read about here. If you are not satisfied with the default player, there are a number of products that help you build your player, build it nearly every major CMS platform and provide all necessary workarounds for pseudo-browsers (ironically speaking) like IE, here’s one example.
Have you found other solutions to this problem? Maybe something more elegant?