CSS页面嵌入兼容性视频

嵌入视频,目前使用html5标签<video>进行嵌入，基本使用见下：

<video width="320" height="240"  controls muted loop autoplay="autoplay" poster="./images/default.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label='English'>
  <track src="subtitles_cn.vtt" kind="subtitles" srclang="zh" label='Chinese'>
  Your browser does not support the video tag.
</video>

针对<video>标签简要说明，目前ie9+支持video标签：

• controls 显示视频操作条 默认：无
• muted 静音模式 默认：正常
• loop 循环播放次数
• autoplay 自动开始播放，默认：否
• preload 略 与autoplay无法
• track 加载字幕，较新的浏览器开始支持，支持情况见下：

track support.png

• source 播放文件格式，之前因版权保护的问题，各家浏览器支持不一，查看W3school各家浏览器目前均支持mp4格式，见下：

support video format.png

在考虑兼容IE8老式浏览器，可采用以下稳妥办法,内容参考Video for everybody GENERATOR：

<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">   
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />   
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> 
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />   
  <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">     
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />      
    <param name="allowFullScreen" value="true" />   
    <param name="wmode" value="transparent" />      
    <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />     
    ![Big Buck Bunny](http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg)  
   </object>
</video>
<p> 
  <strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
</p>

其中flashVars不太了解，应该是设置参数做交互效果的，应该可删除

同时参照W3有简化版多浏览器支持的代码，见下，未进行测试。来源w3 HTML视频：

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
     <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

真实情况，实际项目此类问题基本上很可能开发时候不会选用此种方式进行开发，so仅仅做个学习供参考和积累。

参考链接：
w3school
video for everybody
w3school CN