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个地方需要了解。一是，如何加一个弹幕层。二是，加一个弹幕开关。
一、弹幕层
简单地了解video就会知道，在一些浏览器播放时，video会被置到最高层。弹幕就无法显示了，IOs中有playsinline可以解决，微信也有相关的设置。最后的效果就是我忘了去检查，呵呵。
总地来说，在videojs中加一个东西很方便，因为它支持组件。但是，我用了更加简单的方法，我在播放器ready完之后，在里面直接append了一个层。完美地覆盖在video上，不管是flash还是html5播放时，都可以。
二、弹幕开关
这个就不能随便动手了，因为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。
