视频播放兼容解决方案 - Video For Everybody

从这里看到的：http://camendesign.com/code/video_for_everybody

通过一段HTML实现在各个浏览器下的视频播放：
[code]
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
[/code]

HTML5规定，任何内嵌于'<video>'元素的标签，除了'<source>'都将忽略，因此内嵌'<object>'元素保持向后兼容。


对于支持HTML5的浏览器，将使用HTML5进行视频播放；

对于不支持HTML5的浏览器，将自动使用Flash进行播放；

对于不支持HTML5，又没有装Flash的用户，将视频截图提供给用户，提示用户下载视频文件。

Demo地址：http://camendesign.com/code/video_for_everybody/test.html