Js网络视频播放器之VideoJs&&ckplayer(直播拉流rtmp、hls)

一、轻量级的开源播放器VideoJs&&Ckplayer

1、videoJS

对于HTML5支持非常棒,可以自动在flash和Html5播放器之间进行切换,videoJS可以兼容到IE8,它提供的界面非常简洁,需要对界面进行二次开发。

获取videoJs


2、ckPlayer

这个播放器是国产播放器,功能有很多,只简单介绍两个功能,(1)提供手动切换html5和flash功能(2)提供了关灯开灯功能。完全可以满足国内开发的需求(3)它内置了大量的广告位,比如片头广告,暂停广告,片尾广告,缓冲广告,切点广告,滚动文字广告,以及满足权限关闭广告的功能....秒懂国内看视频就是广告比较多。

获取ckplayer

二、videoJS播放器嵌入页面及api介绍

1、创建videoJS播放器实例

(1)调用swf文件

[html] view plain copy
 print?
  1. <script type="text/javascript">videojs.options.flash.swf = "player/video-js.swf";script>  

(2)配置初始化参数

[html] view plain copy
 print?
  1.   
  2.     <video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"   
  3.     controls preload="auto" poster="img/eguidlogo.png" width="640" height="360"   
  4.     data-setup='{ "html5" : { "nativeTextTracks" : false } }'>  
  5.         <source src='rtmp://192.168.30.21/live/' type='rtmp/flv'  />  
  6.     video>  

如果播放的是普通视频,需要修改

type里面放 ‘ video/视频格式 ’ 即可

(3)创建播放器实例

[html] view plain copy
 print?
  1. //播放器实例  
  2. var player = videojs('videoPlayer');  

补充:videojs会根据浏览器自动切换flash和html5播放模式

2、videoJS常用api:

[html] view plain copy
 print?
  1. /*  
  2. * 根据videoJS官方文档编写的播放器常用操作    
  3. */  
  4.   
  5.     //获取当前类型  
  6.     function getCurrentType(idnex) {  
  7.         return idnex.currentType();  
  8.     }  
  9.     //获取当前播放地址  
  10.     function getCurrentAddr(index) {  
  11.         return index.currentSrc();  
  12.     }  
  13.     //获取当前播放时间  
  14.     function getCurrentTime(index) {  
  15.         return index.currentTime();  
  16.     }  
  17.     //获取当前网络状态  
  18.     function networkState(index) {  
  19.         return index.networkState();  
  20.     }  
  21.     //修改播放地址  
  22.     function setsrc(index, url, type) {  
  23.         index.src({  
  24.             type : type,  
  25.             src : url  
  26.         });  
  27.     }  
  28.     //重载播放器  
  29.     function reset(index) {  
  30.         index.reset();  
  31.         index.load();  
  32.     }  
  33.     //播放  
  34.     function play(index) {  
  35.         index.play();  
  36.     }  
  37.     //暂停  
  38.     function pause(index) {  
  39.         index.pause();  
  40.     }  

3、videoJS菜单界面二次开发

简单实现清晰度控制和创建清晰度菜单

[html] view plain copy
 print?
  1. //播放器实例  
  2. var player = videojs('videoPlayer');  
  3.   
  4. //播放器初始化操作面板清晰度菜单  
  5.     function playerInitVideo() {  
  6.         $videoPanelMenu = $(".vjs-fullscreen-control");  
  7.         $videoPanelMenu.before('<div class="vjs-subtitles-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true">'  
  8.                         + '<div class="vjs-menu" role="presentation">'  
  9.                         + '<ul class="vjs-menu-content" role="menu">'  
  10.                         + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeUrl(this)">高清li>'  
  11.                         + '<li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox"  onclick="changeUrl(this)">标清 li>'  
  12.                         + 'ul>div><span class="vjs-control-text">清晰度span>div>');  
  13.         }  
  14.     //加载页面进行播放器初始化  
  15.     player.ready(function() {  
  16.         playerInitVideo();  
  17.         //player.play();  
  18.         //setsrc(player,"rtmp://192.168.30.21/live/test3","rtmp/flv");  
  19.     });  
  20.       
  21.     //通过id获取DOM  
  22.     function get(index) {  
  23.         return document.getElementById(index);  
  24.     }  
  25.     //修改播放地址并播放  
  26.     function writeAddressAndPlay(index,url,type) {  
  27.         //播放器操作  
  28.         setsrc(index, url, type?type:"rtmp/flv");  
  29.         play(index);  
  30.     }  
  31.     //高清标清切换就是应用名加减HD  
  32.     function changeUrl(video) {  
  33.         var index = $(video).text();  
  34.         //获取当前播放的url  
  35.         var CurrentUrl = getCurrentAddr(player);  
  36.         $(".vjs-menu-item").removeClass("vjs-selected");  
  37.             $(video).addClass("vjs-selected");  
  38.         if (index == "高清") {  
  39.             if (CurrentUrl.indexOf("HD") == -1) {  
  40.                 CurrentUrl = CurrentUrl + "HD";  
  41.             } else {  
  42.                 return;  
  43.             }  
  44.         } else {  
  45.             if (CurrentUrl.indexOf("HD") != -1) {  
  46.                 CurrentUrl = CurrentUrl.replace("HD", "");  
  47.             } else {  
  48.                 return;  
  49.             }  
  50.         }  
  51.         //修改地址并播放  
  52.         writeAddressAndPlay(player, CurrentUrl);  
  53.     }  
  54.       
这只是一种方案,如果有更好的方案,可以采用其他方法。

我这里的两个实时流采用nginx流媒体服务器推送的两个实时流的方式(一个普清,一个高清),在命名方式上采用类似增减HD的方式控制,到这里就可以自由控制清晰度了


三、ckPlayer播放器嵌入页面

1、创建播放器实例

[html] view plain copy
 print?
  1.     <script type="text/javascript">  
  2.     //如果你不需要某项设置,可以直接删除,注意var flashvars的最后一个值后面不能有逗号  
  3.     function loadedHandler(){  
  4.         if(CKobject.getObjectById('ckplayer_a1').getType()){//说明使用html5播放器  
  5.             alert('播放器已加载,调用的是HTML5播放模块');  
  6.         }  
  7.         else{  
  8.             alert('播放器已加载,调用的是Flash播放模块');  
  9.         }  
  10.     }  
  11.     var _nn=0;  
  12.     function ckplayer_status(str){  
  13.         _nn+=1;  
  14.         if(_nn>100){  
  15.             _nn=0;  
  16.             document.getElementById('statusvalue').value='';  
  17.         }  
  18.         document.getElementById('statusvalue').value=str+'\n'+document.getElementById('statusvalue').value;  
  19.     }  
  20.       
  21.         var flashvars={  
  22.         f:'http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4',//视频地址  
  23.         a:'',//调用时的参数,只有当s>0的时候有效  
  24.         s:'0',//调用方式,0=普通方法(f=视频地址),1=网址形式,2=xml形式,3=swf形式(s>0时f=网址,配合a来完成对地址的组装)  
  25.         c:'1',//是否读取文本配置,0不是,1是  
  26.         x:'',//调用配置文件路径,只有在c=1时使用。默认为空调用的是ckplayer.xml  
  27.         i:'',//初始图片地址  
  28.         d:'',//暂停时播放的广告,swf/图片,多个用竖线隔开,图片要加链接地址,没有的时候留空就行  
  29.         u:'',//暂停时如果是图片的话,加个链接地址  
  30.         l:'',//前置广告,swf/图片/视频,多个用竖线隔开,图片和视频要加链接地址  
  31.         r:'',//前置广告的链接地址,多个用竖线隔开,没有的留空  
  32.         t:'0|0',//视频开始前播放swf/图片时的时间,多个用竖线隔开  
  33.         y:'',//这里是使用网址形式调用广告地址时使用,前提是要设置l的值为空  
  34.         z:'',//缓冲广告,只能放一个,swf格式  
  35.         e:'2',//视频结束后的动作,0是调用js函数,1是循环播放,2是暂停播放并且不调用广告,3是调用视频推荐列表的插件,4是清除视频流并调用js功能和1差不多,5是暂停播放并且调用暂停广告  
  36.         v:'80',//默认音量,0-100之间  
  37.         p:'1',//视频默认0是暂停,1是播放,2是不加载视频  
  38.         h:'0',//播放http视频流时采用何种拖动方法,=0不使用任意拖动,=1是使用按关键帧,=2是按时间点,=3是自动判断按什么(如果视频格式是.mp4就按关键帧,.flv就按关键时间),=4也是自动判断(只要包含字符mp4就按mp4来,只要包含字符flv就按flv来)  
  39.         q:'',//视频流拖动时参考函数,默认是start  
  40.         m:'',//让该参数为一个链接地址时,单击播放器将跳转到该地址  
  41.         o:'',//当p=2时,可以设置视频的时间,单位,秒  
  42.         w:'',//当p=2时,可以设置视频的总字节数  
  43.         g:'',//视频直接g秒开始播放  
  44.         j:'',//跳过片尾功能,j>0则从播放多少时间后跳到结束,<0则总总时间-该值的绝对值时跳到结束  
  45.         k:'',//提示点时间,如 30|60鼠标经过进度栏30秒,60秒会提示n指定的相应的文字  
  46.         n:'',//提示点文字,跟k配合使用,如 提示点1|提示点2  
  47.         wh:'',//宽高比,可以自己定义视频的宽高或宽高比如:wh:'4:3',或wh:'1080:720'  
  48.         lv:'0',//是否是直播流,=1则锁定进度栏  
  49.         loaded:'loadedHandler',//当播放器加载完成后发送该js函数loaded  
  50.         //调用播放器的所有参数列表结束  
  51.         //以下为自定义的播放器参数用来在插件里引用的  
  52.         my_url:encodeURIComponent(window.location.href)//本页面地址  
  53.         //调用自定义播放器参数结束  
  54.         };  
  55.     var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always'};//这里定义播放器的其它参数如背景色(跟flashvars中的b不同),是否支持全屏,是否支持交互  
  56.     var video=['http://192.168.30.21/test1HD.video.mp4'];  
  57.     CKobject.embed('ckplayer/ckplayer/ckplayer.swf','player1','ckplayer_1','720px','360px',false,flashvars,video,params);  
  58. script>  

2、常用配置功能

     参考ckplayer官网功能配置

      



3、常用API

[html] view plain copy
 print?
  1.     function videoLoadJs(s){  
  2.         alert("执行了播放");  
  3.     }  
  4.     function playerstop(){  
  5.         //只有当调用视频播放器时设置e=0或4时会有效果  
  6.         alert('播放完成');    
  7.     }  
  8.     var _nn=0;//用来计算实时监听的条数的,超过100条记录就要删除,不然会消耗内存  
  9.       
  10.     function getstart(){  
  11.         var a=CKobject.getObjectById('ckplayer_1').getStatus();  
  12.         var ss='';  
  13.         for (var k in a){  
  14.             ss+=k+":"+a[k]+'\n';  
  15.         }  
  16.         alert(ss);  
  17.     }  
  18.   
  19.     function changePrompt(){  
  20.         CKobject.getObjectById('ckplayer_1').promptUnload();//卸载掉目前的  
  21.         CKobject.getObjectById('ckplayer_1').changeFlashvars('{k->10|20|30}{n->重设提示点一|重设提示点二|重设提示点三}');  
  22.         CKobject.getObjectById('ckplayer_1').promptLoad();//重新加载  
  23.     }  
  24.     function addflash(){  
  25.         if(CKobject.Flash()['f']){  
  26.             CKobject._K_('player1').innerHTML='';  
  27.             CKobject.embedSWF('ckplayer/ckplayer/ckplayer.swf','player1','ckplayer_1','600','400',flashvars,params);  
  28.         }  
  29.         else{  
  30.             alert('该环境中没有安装flash插件,无法切换');  
  31.         }  
  32.     }  
  33.     function addhtml5(){  
  34.         if(CKobject.isHTML5()){  
  35.             support=['all'];  
  36.             CKobject._K_('player1').innerHTML='';  
  37.             CKobject.embedHTML5('player1','ckplayer_1',600,400,video,flashvars,support);  
  38.         }  
  39.         else{  
  40.             alert('该环境不支持html5,无法切换');  
  41.         }  
  42.     }  
  43.     function addListener(){  
  44.         if(CKobject.getObjectById('ckplayer_1').getType()){//说明使用html5播放器  
  45.             CKobject.getObjectById('ckplayer_1').addListener('play',playHandler);  
  46.         }  
  47.         else{  
  48.             CKobject.getObjectById('ckplayer_1').addListener('play','playHandler');  
  49.         }  
  50.     }  
  51.     function playHandler(){  
  52.         alert('因为注册了监听播放,所以弹出此内容,删除监听将不再弹出');  
  53.     }  
  54.     function removeListener(){//删除监听事件  
  55.         if(CKobject.getObjectById('ckplayer_1').getType()){//说明使用html5播放器  
  56.             CKobject.getObjectById('ckplayer_1').removeListener('play',playHandler);  
  57.         }  
  58.         else{  
  59.             CKobject.getObjectById('ckplayer_1').removeListener('play','playHandler');  
  60.         }  
  61.     }  
  62. script>  
  63. <input type="button" name="button23" value="切换到flash播放器" onClick="addflash();" />  
  64.   <input type="button" name="button24" value="切换到html5播放器" onClick="addhtml5();" />  
  65. p>  
  66. <p>以下的操作对flash播放器和html5播放器都有效p>  
  67. <p>  
  68. <input type="button" name="button5" value="播放" onClick="CKobject.getObjectById('ckplayer_1').videoPlay();" />  
  69.   <input type="button" name="button6" value="暂停" onClick="CKobject.getObjectById('ckplayer_1').videoPause();" />  
  70.   <input type="button" name="button7" value="播放/暂停" onClick="CKobject.getObjectById('ckplayer_a1').playOrPause();" />  
  71.   <input type="button" name="button8" value="快进" onClick="CKobject.getObjectById('ckplayer_1').fastNext();" />  
  72.   <input type="button" name="button9" value="快退" onClick="CKobject.getObjectById('ckplayer_1').fastBack();" />  
  73.   <input type="button" name="button15" value="暂停监听" onClick="CKobject.getObjectById('ckplayer_1').changeStatus(0);" />  
  74.   <input type="button" name="button16" value="加ID的监听" onClick="CKobject.getObjectById('ckplayer_1').changeStatus(3);" />  
  75.   <input type="button" name="button21" value="获取播放器当前相关属性" onClick="getstart();" />  
  76.   <input type="button" name="button13" value="注册监听播放事件" onClick="addListener();" />  
  77.   <input type="button" name="button14" value="删除监听播放事件" onClick="removeListener();" />  
  78. p>  
  79. <p>  
  80.   播放新参数地址:  
  81.   <input name="newaddress" type="text" id="newaddress" value="" size="60" maxlength="300" />  
  82.   <input type="button" name="button" id="button" value="跳转" onClick="CKobject.getObjectById('ckplayer_1').newAddress(document.getElementById('newaddress').value);" /><br>  
  83. p>  
  84. <p id="aboutme">p>  
  85. <script type="text/javascript">  
  86. var aboutme='';  
  87. aboutme+='平台(浏览器)内核:'+CKobject.Platform()+'<br />';  
  88. aboutme+='浏览器:'+CKobject.browser()['B']+'<br />';  
  89. aboutme+='浏览器版本:'+CKobject.browser()['V']+'<br />';  
  90. aboutme+='是否安装了flash插件:'+CKobject.Flash()['f']+'<br />';  
  91. if(CKobject.Flash()['f']){  
  92.     aboutme+='flash插件版本:'+CKobject.Flash()['v']+'<br />';  
  93. }  
  94. aboutme+='是否支持HTML5:'+CKobject.isHTML5()+'<br />';  
  95. CKobject._K_('aboutme').innerHTML=aboutme;  

四、测试

  videoJs初次拉取rtmp流播放时会出现,必须改变显示区域才能显示视频的bug,目前尚不清楚为什么,同样在推流端网络较差,推流断断续续的时候,video偶尔也会出现这种黑屏问题,尚不清楚原因,videojs无法手动设置buffer大小(缓冲时间)详见https://github.com/videojs/video.js/issues/1725,相比ckplayer效果比较好,直播我推荐使用ckplayer。

你可能感兴趣的:(直播播放)