HTML5 video problems - captivate 6. Browser and Device compatibility?

Question

I am doing some help videos, they are required to work on all browsers and devices - ipod/pad/phone android etc.

My understanding was you can do this with HTML5 and have fallbacks for each device/browser?

However i have had to add javascript to detect the browser then go off accordingly to different html pages where the video will play on that browser or device.

Surely there must be a simpler way to do this in ONE html page? What formats are used for each browser?

I am using ChromeFrame to get around the IE issues too.

Thanks

Answer 1

I recommend looking into video.js which takes care of browser support detection.

For video formats you can use mp4 and WebM together with video.js it should cover all browsers.

From the videoJS website...

Web Browsers

Whether a user has the latest version of a browser, or something ancient like Internet Explorer 6, they'll get a similar experience with Video.js which uses a super-lightweight Flash player for browsers that don't support HTML5 video.

Video Formats

Web video formats can get complicated. Video.js can make it easier by using a single MP4 file for all users, or additional formats like WebM, Ogg, and even HTTP Live Streaming for greater HTML5 compatibility.

PS. Be aware that there will be visual differences between browsers (mostly older IE browsers), especially when the Flash fallback kicks in. The fullscreen option is the most notable difference.