views:

632

answers:

2

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?

+2  A: 

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

Kyle
Why "Eventually"?
Mike Trpcic
Not released yet, but that looks promising.
ryanulit
Eventually because it's not released yet. I'm not 100% sure this is jQuery, but man, keep an eye out because this is legit. It drops back to the normal video player on iPad + iPhone. It has flash mode, etc.
Kyle
+5  A: 

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?

Nicholas Wilson
Wait a sec, don't you need a plugin for the flash api? video.play() is not going to work on flash without more code.
Mark