I found a HTML5 player with fall back capability to flash if needed. Here is the code.
- Code: Select all
<!-- "Video For Everybody" v0.3.2
=================================================================================================================== -->
<!-- first try HTML5 playback. if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<video width="640" height="360" poster="__POSTER__.JPG" controls>
<!-- you must use `</source>` to avoid a closure bug in Firefox 3 / Camino 2! -->
<source src="__VIDEO__.OGV" type="video/ogg"><!-- Firefox native OGG video --></source>
<source src="__VIDEO__.MP4" type="video/mp4"><!-- Safari / iPhone video --></source>
<!-- IE only QuickTime embed: IE6 is ignored as it does not support `<object>` in `<object>` so we skip QuickTime
and go straight to Flash further down. the line break after the `classid` is required due to a bug in IE -->
<!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]-->
<!-- non-IE QuickTime embed (hidden from IE): the self-closing comment tag allows non-IE browsers to
see the HTML whilst being compatible with serving as XML -->
<!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4">
<!--<![endif]-->
<param name="src" value="__VIDEO__.MP4" />
<param name="showlogo" value="false" />
<param name="autoplay" value="false" />
<!-- fallback to Flash -->
<object width="640" height="384" type="application/x-shockwave-flash"
data="__FLASH__.SWF?image=__POSTER__.JPG&file=__VIDEO__.MP4">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. download links are below the video. warning: putting anything more than
the fallback image in the fallback may trigger an iPhone OS3+ bug where the video will not play -->
<img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__"
title="No video playback capabilities, please download the video below"
/>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>
(If you would like your video to automatically start playing, check out the sample code on the test page.)
Here’s a compacted version as an example:
(Technically only one line break is required to deal with an IE bug on line 4)
<video width="640" height="360" poster="__POSTER__.JPG" controls>
<source src="__VIDEO__.OGV" type="video/ogg"></source>
<source src="__VIDEO__.MP4" type="video/mp4"></source><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4">
<!--<![endif]-->
<param name="src" value="__VIDEO__.MP4" />
<param name="showlogo" value="false" />
<param name="autoplay" value="false" />
<object width="640" height="384" type="application/x-shockwave-flash"
data="__FLASH__.SWF?image=__POSTER__.JPG&file=__VIDEO__.MP4">
<param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__"
title="No video playback capabilities, please download the video below" />
</object><!--[if gt IE 6]><!--></object><!--<![endif]-->
</video>
<p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>
The only issue is that I am not sure where to put this since Subsonic seems to be done in javascript and this is standard HTML. Anyone have any input?
Also look at the code there is a full explanation at the top and a compact version at the bottom. I tested this on a quick site I put up an it works fine, but there is no transcoding and I don't want to have to recode all my movies just for my cellphone.
thanks for any help anyone can shed on this.