这是笔者写的第一篇博客，此时已学习前端有半年了，html，css，js，bootstrap框架，ajax都碰过。
前几天在一个项目中，做一个学校的官方网站，官方网站嘛，当然兼容性的要求是很高的，需求改了好几次，产品也改了好几次，虽然很累，因为是第一次接触到网页媒体板块，什么都不懂，就知道几个embed，object，param等怎么用，在网上的各大前端社区
和论坛中搜尽了也不见我想要的结果，稍微理想一点的是用h5的vedio来处理，但是此方法是通过转化为ogg，mp4以及webm的视频格式，并且编码为h264，这样才能兼容所有的浏览器。至于哪些浏览器的哪些版本兼容哪些视频格式，笔者就不在这里详说了，因为笔者这次讲的重点不是这个，并且这种方法为了兼容各种浏览器，一个视频就要同时存在三种格式，也就是说在网页上为了播放一个视频，服务器上就要占3倍的空间，而且每次上传一个视频就要转3中格式，这效率，笔者就不吐槽了！！！要是给上面的头儿知道了你这样去挥霍他的或者是公司的服务器，额，后果自己想。。。
当然了，前面所讲的只是在页面中插入视频的其中一种方法，是迎合着h5出来之后才有的。那么，第二种方法呢，是把你想要插入页面中的视频先上传在优酷啊，土豆啊，爱奇艺啊，这些专业的视频网站上，借助着网页的视频领域中的大佬们的力量，生成相应的html代码，然后直接复制到你的页面中，即可生成视频。这个方法虽然简单快捷，并且相比钱买所说的那种方法，一是不用占用你的服务器丁点儿空间，顶多也就1k不到的视频代码，而且还有固定的播放器样式，因为前面的那种方法呢，生成的播放器是浏览器自带的，每个浏览器自带的播放器自然看起来不同，有的看起来挺好看的，有的看起来丑得不得了，并且自带的播放器功能也有差异，那么引入著名视频网站的视频代码这种方法呢，就解决了这个缺陷。还有一个好处就是如我头儿说的那样：你要摆在官网上的视频是有关学校的，那么既然能挂着优酷这些的名义的话，自然也就能扩大校方的知名度。说完这句之后，他又补充了一句：但是，上传到这些网站的视频有可能会被管理员封了，因为有可能几年之后视频网站的规则会变，那么你就要准备一个planB，就是在校方的服务器上也要放有视频。一听到这句话，我心里便想：哎呀我的妈丫，又得开工了。不过也挺谢谢头儿，是他让我用整整两天的时间把网页视频这块儿从白痴级别到入门级别。
现在我要讲第三种方法，而且是最全的方法，可以在pc端兼容所有版本的浏览器（移动端我暂时还没试过）。
在讲这种方法之前，我们想一想，在h5的video标签没有出来之前，肯定也有很著名的网路公司遇到过类似的问题，要把视频放到页面中并且兼容所有的浏览器，那想想，不能用别人的品牌，而是有自己的播放器。想到这里，我便立刻上网搜，还真有。“ckplayer”被我发现了，它真的是一款很棒的网页播放器，在官网能够根据你的需要生成相应的代码，并且也有很多额外的插件下载，比如说播放器列表，分享功能，开关功能，等等。
①我按照官网的说明，将crossdomain.xml文件和ckplayer文件夹放在了根目录，如图：
；
②打开ckplayer，会有很多插件可以提供我们调参数，如图：
；
③在html中全程是通过js来实现创建播放器以及传入参数的，笔者已经在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，而我们当然希望自己手中有一套万能兼容性的播放代码，这样在以后的工作项目中都可以运用到。而以上的代码是笔者从网上凑出来的，已经很好地兼容所有的浏览器。
⑤特别说明：
Ⅰ我所介绍的这款综合性网页播放器代码只需要一种视频格式，即mp4即可。
Ⅱ在ff中不能直接接收zip文件，而其他浏览器是可以的，所以我把zip文件解压了。
Ⅲ ckplayer.js ckplayer.xml language.xml offlights.js player.js related.xml等这些都是有关播放器的样式的，我们可以通过编辑器打开来调，里面的每一行都有很详细的注释，我们只需要按照注释的提示来调参数，即可设计出一款自己喜欢的播放器样式，并且没有优酷等播放器的广告限制，也没有logo，导入优酷等的播放器媒体代码若不是会员的话还要苦等40多秒的广告时间。（若想要的朋友可以在评论处留下邮箱，笔者会发过去的；拿到代码的朋友只需要按照路径放入mp4和封面图片，即可实现）
Ⅳ有了这款综合性网页播放器代码，我们可以随意改变自己的样式，同时也可以植入我们自己的广告。
以上方法是笔者花了整整2天整合出来的，并且不断地修改加工，纯js去实现一款兼容所有pc端浏览器，希望能够帮助到当务之急的做前端的朋友。
github: https://github.com/GarvenZhang/videoPlayer
4496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
