網頁視頻播放的常見兼容方式總結

在作一些項目時，項目需求居然要兼容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.csdn.net/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.htm

 

方式二：使用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下播放存在問題。

 

必要說明： 

  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

     

做者：Johnny丶me

連接：

https://blog.csdn.net/Tyro_java/article/details/78457129

---

​

識別圖中二維碼,領取python全套視頻資料