從上一年開始，我們開始接觸直播，現在直播成本真的很低，很多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。