如何在頁面中插入兼容全部瀏覽器的視頻？

時間 2019-12-18

原文原文鏈接

　　這是筆者寫的第一篇博客，此時已學習前端有半年了，html，css，js，bootstrap框架，ajax都碰過。
　　前幾天在一個項目中，作一個學校的官方網站，官方網站嘛，固然兼容性的要求是很高的，需求改了好幾回，產品也改了好幾回，雖然很累，由於是第一次接觸到網頁媒體板塊，什麼都不懂，就知道幾個embed，object，param等怎麼用，在網上的各大前端社區
和論壇中搜盡了也不見我想要的結果，稍微理想一點的是用h5的vedio來處理，可是此方法是經過轉化爲ogg，mp4以及webm的視頻格式，而且編碼爲h264，這樣才能兼容全部的瀏覽器。至於哪些瀏覽器的哪些版本兼容哪些視頻格式，筆者就不在這裏詳說了，由於筆者此次講的重點不是這個，而且這種方法爲了兼容各類瀏覽器，一個視頻就要同時存在三種格式，也就是說在網頁上爲了播放一個視頻，服務器上就要佔3倍的空間，並且每次上傳一個視頻就要轉3中格式，這效率，筆者就不吐槽了！！！要是給上面的頭兒知道了你這樣去揮霍他的或者是公司的服務器，額，後果本身想。。。
　　固然了，前面所講的只是在頁面中插入視頻的其中一種方法，是迎合着h5出來以後纔有的。那麼，第二種方法呢，是把你想要插入頁面中的視頻先上傳在優酷啊，土豆啊，愛奇藝啊，這些專業的視頻網站上，藉助着網頁的視頻領域中的大佬們的力量，生成相應的html代碼，而後直接複製到你的頁面中，便可生成視頻。這個方法雖然簡單快捷，而且相比錢買所說的那種方法，一是不用佔用你的服務器丁點兒空間，頂多也就1k不到的視頻代碼，並且還有固定的播放器樣式，由於前面的那種方法呢，生成的播放器是瀏覽器自帶的，每一個瀏覽器自帶的播放器天然看起來不一樣，有的看起來挺好看的，有的看起來醜得不得了，而且自帶的播放器功能也有差別，那麼引入著名視頻網站的視頻代碼這種方法呢，就解決了這個缺陷。還有一個好處就是如我頭兒說的那樣：你要擺在官網上的視頻是有關學校的，那麼既然能掛着優酷這些的名義的話，天然也就能擴大校方的知名度。說完這句以後，他又補充了一句：可是，上傳到這些網站的視頻有可能會被管理員封了，由於有可能幾年以後視頻網站的規則會變，那麼你就要準備一個planB，就是在校方的服務器上也要放有視頻。一聽到這句話，我內心便想：哎呀個人媽丫，又得開工了。不過也挺謝謝頭兒，是他讓我用整整兩天的時間把網頁視頻這塊兒從白癡級別到入門級別。
　　如今我要講第三種方法，並且是最全的方法，能夠在pc端兼容全部版本的瀏覽器（移動端我暫時還沒試過）。
　　在講這種方法以前，咱們想想，在h5的video標籤沒有出來以前，確定也有很著名的網路公司遇到過相似的問題，要把視頻放到頁面中而且兼容全部的瀏覽器，那想一想，不能用別人的品牌，而是有本身的播放器。想到這裏，我便馬上上網搜，還真有。「ckplayer」被我發現了，它真的是一款很棒的網頁播放器，在官網可以根據你的須要生成相應的代碼，而且也有不少額外的插件下載，好比說播放器列表，分享功能，開關功能，等等。javascript

　　①我按照官網的說明，將crossdomain.xml文件和ckplayer文件夾放在了根目錄，如圖：；php

　　②打開ckplayer，會有不少插件能夠提供咱們調參數，如圖：；css

　　③在html中全程是經過js來實現建立播放器以及傳入參數的，筆者已經在html中有寫了詳細的註釋,各位確定可以看得懂每一步的做用：html

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6 </head>
  7 <body>
  8 <!-- 兼容全部瀏覽器（包括ie整套）開始 -->
  9 <div class="wrap ">
 10     <div class="box play">
 11         <div class="player">
 12             <div id="content_jr" class="player_l" align="center">
 13                 <!-- 控件表，經過參數控制播放器的樣式 -->
 14                 <script src="ckplayer/player.js"  language="javascript"></script>
 15                 <!-- 控制開/關燈 -->
 16                 <script type="text/javascript" src="ckplayer/offlights.js" ></script>
 17                 <!-- 最主要的播放器插件 -->
 18                 <script type="text/javascript" src="ckplayer/ckplayer.js" ></script>
 19                 <!-- js中寫出播放器的html結構 -->
 20                 <script type="text/javascript">
 21                     var videobox = '<div style="width:'+ckdata['dwidth']+'px; height:'+ckdata['dheight']+'px;margin:5px auto;clear:both;">';
 22                     videobox += '<div id="a1" style="position:absolute;z-index:100;"></div>';
 23                     videobox += '</div>';
 24                 </script>
 25                 <!-- 把js中寫好的播放器結構放進html中 -->
 26                 <script type="text/javascript">document.write(videobox)</script>
 27                 <!-- 作兼容處理，傳入視頻實參以及開/關燈實參 -->
 28                 <script type="text/javascript">
 29                     function Extension(str){//判斷開始
 30                         var ext='';
 31                         if(str){
 32                             var file=str.toLowerCase();
 33                             var filearr=file.split('.');
 34                             var exten=filearr[filearr.length-1];
 35                             if(exten=='flv' || exten=='f4v' || exten=='mp4' || exten=='rmov'){
 36                                 ext='video';//普通視頻
 37                             }
 38                             else if(exten=='m3u8'){
 39                                 ext='m3u8';//m3u8
 40                             }
 41                         }
 42                         return ext;
 43                     }
 44                     var _f='';//定義調用視頻的f值
 45                     var _a='';//同上，定義a值
 46                     var _s=0;//同上，定義s值
 47                     var _flv='video/bankbill.mp4';
 48                     if(Extension(_flv)=="video"){//若是是普通視頻
 49                         _f=_flv;
 50                         _s=0;
 51                     }
 52                     else if(Extension(_flv)=="m3u8"){//若是是m3u8
 53                         _f='ckplayer/m3u8.swf';
 54                         _a=_flv;
 55                         _s=4;
 56                     }
 57                     else{//若是都不是的話就使用另外一種調用方式
 58                         _f='';// ckplayer/video.php?url=[$pat]
 59                         _a='video/bankbill.mp4';
 60                         _s=2;
 61                     }//判斷結束，下面是調用視頻，所有由上面的變量傳值
 62                     var newcpt_share='';// ckplayer/ckplayer_share.php
 63                     var newcontrol_rel=''; //related.swf,ckplayer/ckplayer_related.php,1
 64                     var flashvars={
 65                         f:_f,
 66                         a:_a,
 67                         s:_s,
 68                         c:'0',x:'',
 69                         l:ckdata['adpre'],
 70                         r:ckdata['adpreurl'],
 71                         t:ckdata['adpretime'],
 72                         d:ckdata['adpau'],
 73                         u:ckdata['adpauurl'],
 74                         e:ckdata['endmotion'],
 75                         p:ckdata['autoplay'],
 76                         v:ckdata['volume'],
 77                         k:'',
 78                         i:'images/videoPost.png',   //播放前的封面
 79                         n:'',
 80                         lv:'0',
 81                         my_title:'',
 82                         my_pic:'',
 83                         my_url:encodeURIComponent(window.location.href)
 84                     };
 85 
 86                     var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};
 87                     var video=['->video/mp4','->video/webm','->video/ogg'];
 88                     var support=['iPad','iPhone','ios','android+false','msie10+false'];//默認的在ipad,iphone,ios設備中用html5播放,android,ie10上沒有安裝flash的也調用html5
 89                     CKobject.embedHTML5('a1','ckplayer_a1',ckdata['dwidth'],ckdata['dheight'],video,flashvars,support);
 90                     CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1',ckdata['dwidth'],ckdata['dheight'],false,flashvars,video,params);
 91 
 92                     function getstart(){
 93                         var a=CKobject.getObjectById('ckplayer_a1').getStatus();
 94                         var ss='';
 95                         for (var k in a){
 96                             ss+=k+":"+a[k]+'\n';
 97                         }
 98                         alert(ss);
 99                     }
100                     function ckadjump(){
101                         alert('會員等級不夠，請登陸或提高會員等級後使用跳過廣告按鈕！');
102                     }
103                     //開關燈
104                     var box = new LightBox();
105                     function closelights(){//關燈
106                         box.Show();
107                         CKobject._K_('a1').style.width=ckdata['cwidth']+'px';
108                         CKobject._K_('a1').style.height=ckdata['cheight']+'px';
109                         CKobject.getObjectById('ckplayer_a1').width=ckdata['cwidth'];
110                         CKobject.getObjectById('ckplayer_a1').height=ckdata['cheight'];
111                     }
112                     function openlights(){//開燈
113                         box.Close();
114                         CKobject._K_('a1').style.width=ckdata['dwidth']+'px';
115                         CKobject._K_('a1').style.height=ckdata['dheight']+'px';
116                         CKobject.getObjectById('ckplayer_a1').width=ckdata['dwidth'];
117                         CKobject.getObjectById('ckplayer_a1').height=ckdata['dheight'];
118                     }
119                 </script>
120             </div>
121         </div>
122     </div>
123 </div>
124 <!-- 兼容全部瀏覽器（包括ie整套）結束 -->
125 </body>
126 </html>

④若是是用ckplayer官網的一套生成的代碼，是兼容不了ie6-8，而咱們固然但願本身手中有一套萬能兼容性的播放代碼，這樣在之後的工做項目中均可以運用到。而以上的代碼是筆者從網上湊出來的，已經很好地兼容全部的瀏覽器。前端

⑤特別說明：html5

　　Ⅰ我所介紹的這款綜合性網頁播放器代碼只須要一種視頻格式，即mp4便可。java

　　Ⅱ在ff中不能直接接收zip文件，而其餘瀏覽器是能夠的，因此我把zip文件解壓了。android

　　Ⅲ ckplayer.js ckplayer.xml language.xml offlights.js player.js related.xml等這些都是有關播放器的樣式的，咱們能夠經過編輯器打開來調，裏面的每一行都有很詳細的註釋，咱們只須要按照註釋的提示來調參數，便可設計出一款本身喜歡的播放器樣式，而且沒有優酷等播放器的廣告限制，也沒有logo，導入優酷等的播放器媒體代碼若不是會員的話還要苦等40多秒的廣告時間。（若想要的朋友能夠在評論處留下郵箱，筆者會發過去的；拿到代碼的朋友只須要按照路徑放入mp4和封面圖片，便可實現）ios

　　Ⅳ有了這款綜合性網頁播放器代碼，咱們能夠隨意改變本身的樣式，同時也能夠植入咱們本身的廣告。git

以上方法是筆者花了整整2天整合出來的，而且不斷地修改加工，純js去實現一款兼容全部pc端瀏覽器，但願可以幫助到當務之急的作前端的朋友。

github: https://github.com/GarvenZhang/videoPlayer