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

方式一：根据浏览器判断使用不同的标签处理
html部分：
javascript:
var flag = !-[1,]; // 原理是利用了IE6，7，8与标准浏览器在处理数组的toString方法的差异做成的。var videoSource = “your-video-url.mp4”;
function renderVideo(id) {var htmlStr = “”;htmlStr += ‘’;htmlStr += ‘’;htmlStr += ‘’;document.getElementById(id).innerHTML = htmlStr;}
function renderVideoIE(id) {var htmlStr = “”;htmlStr += ‘<object classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”’;htmlStr += ‘codebase=“http://download.macromedia.co…”’;htmlStr += ‘width=“300” height=“200”>’;htmlStr += ‘’;htmlStr += ‘’;htmlStr += ‘’;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/…”’;htmlStr += ‘type=“application/x-shockwave-flash” width=“700” height=“400”>’;htmlStr += ‘’;document.getElementById(id).innerHTML = htmlStr;}
flag ? renderVideoIE(“videoContainer”) : renderVideo(“videoContainer”);
必要说明：
判断IE等浏览器 :http://www.jb51.net/article/5…object中的api：http://blog.csdn.net/zh_rey/a…w3school关于embed :http://www.w3school.com.cn/ta…w3school关于video的兼容性http://www.w3school.com.cn/ta…w3school关于object兼容性http://www.w3school.com.cn/ta…object和video分别处理： http://blog.sina.com.cn/s/blo…方式二：使用html5media处理
html部分：
// 直接引用html5media的库
;// 直接使用video标签来处理使用这个控件尝试在高版本的IE模拟器下奏效，但在在实际的IE6下播放存在问题。
必要说明：
https://github.com/etianen/ht…http://www.cnblogs.com/sun813…http://www.zhangxinxu.com/wor…
在IE678中，html5media内部使用了flowplayer播放器在处理，有控制播放的各种面板。在现代浏览器中会直接使用video标签来处理。
其他相关链接：
兼容IE8的video.js,可自定义皮肤：http://videojs.com
WFObject播放flash：
http://www.webkfa.com/one2/w1…
使用js获取地址栏参数的兼容处理方式：
http://www.jb51.net/article/5…
http://www.cnblogs.com/fishtr…
作者：Johnny丶me
链接：
https://blog.csdn.net/Tyro_ja…