• 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。

  • 相关阅读:
    Java中同步
    Java多线程
    Java中的instanceof关键字
    Java多态与C++中多态的实现
    Java中的接口
    Java中的抽象类
    Java单链表的实现
    Java中的内部类
    memcached telnet command
    The CHECK_POLICY and CHECK_EXPIRATION options cannot be turned OFF when MUST_CHANGE is ON. (Microsoft SQL Server,错误: 15128)
  • 原文地址:https://www.cnblogs.com/coolicer/p/8330106.html
Copyright © 2020-2023  润新知