网页视频播放的常见兼容方式总结

在做一些项目时，项目需求竟然要兼容IE6, 一开始并没有合适的解决方案，后来查看了优酷的处理方式，这是一种好的方式，根据不同的浏览器来使用video或object, 我们都知道object的兼容性很好，但是很老，下面我们来进行总结一下：

方式一：根据浏览器判断使用不同的标签处理

html部分：

<div id="videoContainer"></div>

javascript:

var flag = !-[1,]; // 原理是利用了IE6，7，8与标准浏览器在处理数组的toString方法的差异做成的。
var videoSource = "your-video-url.mp4";

function renderVideo(id) {
  var htmlStr = "";
  htmlStr += '<video width="300" height="200" controls autobuffer>';
  htmlStr += '<source src=' + videoSource + ' type="video/mp4">';
  htmlStr += '</video>';
  document.getElementById(id).innerHTML = htmlStr;
}

function renderVideoIE(id) {
  var htmlStr = "";
  htmlStr += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"';
  htmlStr += 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"';
  htmlStr += 'width="300" height="200">';
  htmlStr += '<param name="movie" value="flvplayer.swf"/>';
  htmlStr += '<param name="quality" value="high"/>';
  htmlStr += '<param name="allowFullScreen" value="true"/>';
  htmlStr += '<param name="FlashVars"';
  htmlStr += 'value="vcastr_file=' + videoSource + '&LogoText=description&BufferTime=3&IsAutoPlay=0">';
  htmlStr += '<embed src="flvplayer.swf" allowfullscreen="true"';
  htmlStr += 'flashvars="vcastr_file='+ videoSource +'&IsAutoPlay=0';
  htmlStr += 'quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"';
  htmlStr += 'type="application/x-shockwave-flash" width="700" height="400"></embed>';
  htmlStr += '</object>';
  document.getElementById(id).innerHTML = htmlStr;
}

flag ? renderVideoIE("videoContainer") : renderVideo("videoContainer");

必要说明：
- 判断IE等浏览器 : http://www.jb51.net/article/50464.htm
- object中的api：http://blog.youkuaiyun.com/zh_rey/article/details/71080467
- w3school关于embed : http://www.w3school.com.cn/tags/tag_embed.asp
- w3school关于video的兼容性：http://www.w3school.com.cn/tags/tag_video.asp
- w3school关于object兼容性很棒 : http://www.w3school.com.cn/tags/tag_object.asp
- object和video分别处理：http://blog.sina.com.cn/s/blog_9c6c4d3b0102w7vn.html

方式二：使用html5media处理

html部分：

// 直接引用html5media的库
<script src="https://api.html5media.info/1.1.8/html5media.min.js"></script>
// 直接使用video标签来处理
<video src="your-video-url.mp4" width="300" height="200" controls autobuffer></video>

• 使用这个控件尝试在高版本的IE模拟器下奏效，但在在实际的IE6下播放存在问题。

必要说明：
- github : https://github.com/etianen/html5media
- http://www.cnblogs.com/sun8134/p/4446390.html
- http://www.zhangxinxu.com/wordpress/2010/03/every-browser-support-html5-video/
- 在IE678中，html5media内部使用了flowplayer播放器在处理，有控制播放的各种面板。在现代浏览器中会直接使用video标签来处理。

其他相关链接：

• 兼容IE8的video.js,可自定义皮肤：http://videojs.com
• WFObject播放flash：http://www.webkfa.com/one2/w1442.html
• 使用js获取地址栏参数的兼容处理方式：
  
  • http://www.jb51.net/article/55057.htm
  • http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html