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。