videojs作直播、弹幕

从上一年开始，咱们开始接触直播，如今直播成本真的很低，不少CDN供应商都有提供，本文只是大概讲述播放器这个话题。

开始调研

播放格式，我挑了三种。分别是HLS,RTMP,HTTP-FLV。

下面简单说说区别，若是不作移动端，HTTP-FLV是最优选择，也是当前主流直播网站所用的格式。HLS在videojs中也有js的实现，即便是不支持hls，也能让它支持，估算兼容IE9+，或许更高。因为它的延迟比RTMP和FLV高，因此用做最后的兼容选项。RTMP跟FLV差很少，可是依赖flash技术，好坏不说。在当前状况，仍是比较适合。IE都能用上，这也是迫不得已中的优选。

 

因此，总得来讲。我是以RTMP为主，HLS为辅的方案。

 

最后一套代码写下来，还算顺利。videojs已经到了6.0的版本，下面说说开发中要注意的几点：

 

1. techOrder

这个是你使用哪一种一技术优先，一般是html5，可是也有其余状况。

 

2. src 方法

videojs有一个src方法，用来设置播放源，若是设置为数组时，会自动为你选择，可是若是你的业务复杂的话，仍是要本身去判断更多的状况。

 

3. 6.0版本以上，要本身设置swf的地址

videojs.options.flash.swf = [your path]

 

3.1 使用RTMP时，swf有bug，须要更新修复版本的swf播放器。

 

4. 播放hls时不会自动播放，暂时还没研究。

 

另外，还有组件开发。由于须要加入弹幕，因此我有2个地方须要了解。一是，如何加一个弹幕层。二是，加一个弹幕开关。

1、弹幕层

简单地了解video就会知道，在一些浏览器播放时，video会被置到最高层。弹幕就没法显示了，IOs中有playsinline能够解决，微信也有相关的设置。最后的效果就是我忘了去检查，呵呵。

总地来讲，在videojs中加一个东西很方便，由于它支持组件。可是，我用了更加简单的方法，我在播放器ready完以后，在里面直接append了一个层。完美地覆盖在video上，无论是flash仍是html5播放时，均可以。

2、弹幕开关

这个就不能随便动手了，由于videojs已经比较成熟，可让咱们方便地修改播放器外观。上点代码直观一些：

 1    function addDanmaBtn(player) {
 2       var Dan = videojs.getComponent('Button');
 3       var DanButton = videojs.extend(Dan, {
 4         constructor: function() {
 5           Dan.apply(this, arguments);
 6           this.controlText("弹幕");
 7         }, 
 8         buildCSSClass: function() {
 9           return "icon-danmaku vjs-control vjs-button";
10         },
11         handleClick: function() {
12           if (danmakuShow) {
13             danmaku.hide();
14             this.el_.className += ' off ';
15           } else {
16             danmaku.show();
17             this.el_.className = this.el_.className.replace(/off/, ''); 
18           }
19           danmakuShow = !danmakuShow;
20         }
21       });
22       videojs.registerComponent('DanButton', DanButton);
23       player.getChild('controlBar').addChild('DanButton', {}, 3);
24     }

 

最后的最后，再讲讲弹幕实现。因为时间急，没有使用github最大star那个库，反而选用了另一个。在融入业务时，也修改了很多原来的代码，就不发出来了。再说说在弹幕渲染引擎上，大部分人都选择了DOM模式，这一点我也是费解，之前的人老说canvas好，但实现却没什么人用？我想大概是CSS3能够很方便地实现阴影，并且内存占用会比canvas的低。最后弹幕上线后，一共弹了14万多条。

 

------------------2019年更新-----------------

已经更新为video7，只使用hls就能够了，IE只兼容到11。若是时间充足，能够本身实现，flv+hls解决方案。线上遇到flv播放会断的问题，不知道是源问题，仍是flvjs的问题(github issue也有人报这个问题)。因此，最后仍是不折腾，只支持hls。