jQuery plugins for HTML5 video playback?

Question

I'm looking for a good jQuery plugin that allows HTML5 video playback, with graceful fallback to Flash (and potentially further, to default system player, etc). I've googled, but nothing I've found has been quite what I'm looking for. Any suggestions?

Answer 1

Why do you need a plugin? Do you need a plugin to write a div? Do you need a plugin to manipulate the DOM? The whole point of the HTML5 video and audio elements is that they are built-in! You can use jQuery to set the innerHTML of the container to the ordinary <video> tag. If you are worried about fallback, you will have an absolute nightmare if you try to do that in JS. Are you really confident JS can guess enough about the platform, compile options the browser used, and so on, to work out what codecs are supported?

Any solution you find must leverage the built-in fallback mechanism of <video>, which is designed to do everything for you.

A tutorial with the correct syntax to use is called Video for Everybody. Either echo out that code server-side, or set it as innerHTML using JS and everything works on every browser, including iPhone and Flash fallback.

Note that if you choose to generate the video element using JS, you needlessly prevent it from showing up as an enclosure in RSS.

The page linked also has references to other implementations of the same idea to look at. Anything that requires JS though is immediately suspect as it is more likely to break things than using the built-in video support as intended. (On the other hand, using JS to provide pretty themable controls to the video is exactly as intended; it is just a bad idea to use it to place the video element on the page, as it is too subject to breakage.)

If you must use JS for your own custom controls (use your own image for the play/pause button, etc), the generate the video element on the page with the controls option set (check the documentation if needed) and then unset the controls once you know the client has got a JS solution that can properly drive the video.

Does that make sense?

Answer 2

http://jilion.com/sublime/video eventually =)

Answer 3

I just started looking for a solution like this recently and found jPlayer which is a video/audio player with HTML5 support and Flash playback fallback capabilities. It allows for CSS skinning as well to customize your controls and container.

http://www.jplayer.org/