如何在页面中插入兼容全部浏览器的视频？

时间 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