那些H5用到的技术（4）——弹幕

前言
思路
实现
模式
无限循环模式
时间线模式
停止显示弹幕

前言

以前玩卷轴射击游戏的时候，大量的BOSS子弹让我们无路可逃的时候，让我见识到了真正弹幕的威力，可自从A站B站火了之后，大量评论留言参与到了视频的播放中，也让我见识到了“弹幕”的威力，压根视频就没法看了……全看评论去了，就是那么好玩。

现在没有弹幕功能都不好意思说是做视频or直播网站的。而我们也不能落后呐，产品提需求了，活动H5里面弄个弹幕留言，看起来就高大上有木有啊，以前的静态留言形势都太古板啦，弹幕才能用户high起来啊！好吧，本来说这玩意已经比较成熟了，找轮子，结果发现貌似没有html&js版本的，索性就自己写一个吧，暂时满足简单的需求就行。

思路

如下图所示

主要有3个步骤
1、生成弹幕
根据相应的参数，设置弹幕的字体大小，字体颜色，甚至是弹幕背景（VIP功能，类似QQ聊天气泡），总之可以根据需求设计各种不同的弹幕样式。

2、展示弹幕
生成好弹幕我们就要对其进行展示了，目前主流的展示方式有2种，一种是从屏幕的右往左漂移展示，一种是在屏幕的上、中、下进行展示，这里需要考虑到尽量避免弹幕重叠，有效率用屏幕空间，当实在是没有空间了，才考虑重叠。

3、清除弹幕
在设定时间内显示完弹幕，为了节约资源，所以要对其进行移除清理，或者对其进行复用。

实现

话不多说，上代码看注释

  1. /**
  2.  *  by Leestar54
  3.  *  简易弹幕插件 V1.0
  4.  */
  5. ;
  6. (function($) {
  7.     $.fn.danmu = function(options) {
  8.         //默认参数
  9.         var defaults = {
  10.             fontSize: 16,
  11.             color: 'black',
  12.             showTime: 10000
  13.         }
  15.         //使用jQuery.extend 覆盖插件默认参数
  16.         var options = $.extend(defaults, options);
  19.         var hideTime = defaults.showTime + 500;
  20.         //弹幕的行数
  21.         var dm_lines = Math.floor($(this).height() / 16);
  23.         //当前弹幕行是否有空间进行显示
  24.         var dm_line_empty = Array(dm_lines);
  25.         for (var i = 0; i < dm_line_empty.length; i++) {
  26.             dm_line_empty[i] = true;
  27.         }
  29.         //中文和英文的宽度要分别算
  30.         function getDivWidth(txt, fontSize) {
  31.             var len = 0;
  32.             var charRatio = fontSize * 5 / 8;
  33.             for (var i = 0; i < txt.length; i++) {
  34.                 if (txt[i].match(/[^\x00-\xff]/ig) != null) //全角中文
  35.                     len += fontSize;
  36.                 else
  37.                     len += charRatio; //非中文经过测试得出比例
  38.             }
  39.             return len;
  40.         }
  42.         //公开函数
  43.         this.add = function(txt, id, line, color, fontSize) {
  44.             if (txt === undefined || txt === '') {
  45.                 //抛出异常
  46.                 throw 'txt should not be null';
  47.             }
  48.             if (line === undefined || line === '') {
  49.                 for (var i = 0; i < dm_line_empty.length; i++) {
  50.                     if (dm_line_empty[i]) {
  51.                         dm_line_empty[i] = false;
  52.                         line = i;
  53.                         break;
  54.                     }
  55.                 }
  56.                 //如果都满了，就随机覆盖了
  57.                 if (line === undefined || line === '') {
  58.                     line = Math.floor(Math.random() * dm_lines);
  59.                 }
  60.             }
  61.             if (color === undefined || color === '') {
  62.                 color = defaults.color;
  63.             }
  64.             if (fontSize === undefined || fontSize === '') {
  65.                 fontSize = defaults.fontSize;
  66.             }
  67.             if (id === undefined || id === '') {
  68.                 id = Math.floor(Math.random() * 100000000);
  69.             }
  70.             //使用dom构造单个弹幕div
  71.             var div = document.createElement("div");
  72.             div.id = 'txt_dm' + id;
  73.             div.innerHTML = txt;
  74.             div.style.webkitAnimation = 'run 1s 8s linear forwards';
  75.             div.style.position = 'absolute';
  76.             div.style.top = line * fontSize + 'px';
  77.             div.style.left = $(this).width() + 'px';
  78.             //设置宽度，否则字体会自适应换行，影响显示
  79.             div.style.width = getDivWidth(txt, fontSize) + 'px';
  80.             div.style.fontSize = fontSize + 'px';
  81.             div.style.color = color;
  82.             $(this).append(div);
  83.             $(div).velocity({
  84.                     translateX: '-' + ($(this).width() + $(div).width()) + 'px'
  85.                 },
  86.                 defaults.showTime,
  87.                 'linear');
  89.             //屏幕完全显示完弹幕，就可以添加下一条了, +1为了用一定缓冲距离
  90.             var fullShowTime = Math.floor($(div).width() / $(this).width() * defaults.showTime);
  91.             setTimeout(function() {
  92.                 dm_line_empty[line] = true;
  93.             }, fullShowTime);
  95.             //删除显示完的弹幕
  96.             setTimeout(function() {
  97.                 $('#txt_dm' + id).remove();
  98.             }, hideTime);
  99.         }
  101.         return this;
  102.     }
  103. })(jQuery);

需要注意的是

  1. 中文与英文混合的情况下，宽度计算需要注意，经过测试，得出5/8的比例刚刚好，否则不是太长，就是不够导致换行。
  2. 使用var dm_line_empty = Array(dm_lines);来对每行的弹幕能否显示做判断，添加弹幕的时候，哪行空闲就忘哪行添加数据，提高屏幕的利用率。
  3. 弹幕移动使用的是velocity.js，否则效率太低，在移动设备上卡的飞起。
  4. 并没有实现屏幕上中下的弹幕模式……

使用起来非常的简单，样式自行设置即可

  1. var dm = $('.container').danmu();
  2. dm.add('123');
  3. dm.add('双击66666666666666666');
  4. dm.add('老铁没毛病！')

模式

插件是有了，但是应用到业务上还需要我们自己做空置，一般来说有2个模式，供不同场景使用
这里设计弹幕的基础数据库格式为，至于扩展和业务字段自行添加。
id：自增
txt：用户输入的弹幕
time：用户提交时的总秒数，进入页面就开始从0每秒自增，提交时就是当时的总数，如果是视频，就是当时的播放时间。
type：弹幕模式，可以包括从左往右，从右往左，屏幕上方，中间，下方等等。由于只实现了一种，这个字段我们这里去掉。
可以考虑time，type作为复合索引。

无限循环模式

这应该是大多情况使用的模式，因为H5活动不像看视频，不可能按照发布时间来展示弹幕，因为也许用户发布一条评论的时间有20秒，那么岂不是前20秒整个弹幕都空空的？所以我们首要目的就是呈现那种热闹劲，一次性的读取全部弹幕，如果数量过多，可以做一些取舍，循环播放，每隔一定时间，重复显示弹幕。

  1.     //--------------------------------重复展示弹幕----------------------------------------
  2.     //重复展示时间间隔，如果弹幕少，就设置小一些，这样重复的多。
  3.     var recycle_time = 10;
  4.     var load_recycle_interval;
  5.     var recycle_load_timeout;
  6.     //重复展示弹幕
  7.     function dmRecycleStart(data) {
  8.         for (var i = 0; i < data.length; i++) {
  9.             var id = data[i]['id'];
  10.             var txt = data[i]['txt'];
  11.             //闭包&立即执行传递参数，返回新的方法，否则add方法会被立即执行
  12.             recycle_load_timeout[i] = setTimeout(function(txt, id) {
  13.                 return function() {
  14.                     dm.add(txt, id);
  15.                 };
  16.             }(txt, id), 1000 * Math.floor(Math.random() * recycle_time) + 1); //随机时间点显示文字
  17.         }
  18.     }
  20.     recycle_load_timeout = Array(data.length);
  22.     //先显示一次
  23.     dmRecycleStart(data);
  24.     //然后每隔一段时间都展示一次
  25.     load_recycle_interval = setInterval(function() {
  26.         dmRecycleStart(data);
  27.     }, recycle_time * 1000);

时间线模式

这种模式就是和视频弹幕一样的模式了，按照用户发送弹幕的时间进行播放， 我们需要设置个定时器，每一秒显示一次该时间点的弹幕，每隔一段时间读取时间段内的所有弹幕。
我这里设计时，为了方便直接调用，服务器做了些格式转化，预先把消息按照时间点进行分组了，php参考代码如下：

  1.     public function getdm()
  2.     {
  3.         $start_time = I('get.start_time');
  4.         $end_time   = I('get.end_time');
  5.         $mode       = I('get.type');
  6.         $db_result  = M('dm')->query("select id,txt,ptime  from dm where and ptime between %d and %d" and type=%d,  $start_time, $end_time, $type);
  7.         $ret        = array();
  8.         //根据时间进行分组
  9.         foreach ($db_result as $key => $value) {
  10.             $ret[$value['ptime']][] = array($value['id'], $value['txt']);
  11.         }
  12.         $this->ajaxReturn($ret);
  13.     }

JS代码参考如下：

  1.     //---------------------------------时间线弹幕-----------------------------------------
  2.     var dm_get_count = 0;
  3.     //用户提交弹幕的时候，时间参数可以以此为基准。
  4.     var dm_time = 0;
  5.     var load_interval;
  6.     var load_timeout;
  8.     //加载弹幕
  9.     function dmLoadTimeLine() {
  10.         //每秒钟执行一次，更新时间，这里设置为每30秒为间隔显示一次弹幕（16秒开始预加载），根据时间点投放
  11.         load_interval = setInterval(function() {
  12.             if (dm_time % 16 == 0) {
  13.                 var start_time = dm_get_count * 30;
  14.                 var end_time = (dm_get_count + 1) * 30;
  15.                 //中间预加载
  16.                 // $.get('./getdm', {
  17.                 //     start_time: start_time,
  18.                 //     end_time: end_time,
  19.                 //     type: typeid,
  20.                 // }, function(data) {
  21.                 dm_pre = line_data;
  22.                 console.log(start_time + '-' + end_time + '预加载完成');
  23.                 //第一次加载完成直接显示
  24.                 if (dm_get_count == 0) {
  25.                     dmTimeLineStart();
  26.                 }
  28.                 dm_get_count++;
  29.                 // });
  31.             } else if (dm_time % 30 == 0) {
  33.                 dmTimeLineStart();
  34.             }
  35.             dm_time++;
  36.         }, 1000);
  37.         //每秒1个弹幕，30秒则有30个
  38.         load_timeout = Array(30);
  39.     }
  41.     //时间线弹幕
  42.     function dmTimeLineStart() {
  43.         var start_time = dm_get_count * 30;
  44.         var end_time = (dm_get_count + 1) * 30;
  45.         console.log(start_time + '-' + end_time + '显示弹幕');
  46.         //深度拷贝数组，如果是从接口获取数据，最好拷贝一次。
  47.         var dm_current = $.extend(true, {}, dm_pre);
  48.         //时间点内显示弹幕
  49.         for (var i = start_time; i < end_time; i++) {
  50.             if (dm_current[i] != null) {
  51.                 for (var j = 0; j < dm_current[i].length; j++) {
  52.                     var id = dm_current[i][j]['id'];
  53.                     var txt = dm_current[i][j]['txt'];
  54.                     //内部函数立即执行，闭包传递参数，
  55.                     load_timeout[i] = setTimeout(function(txt, id) {
  56.                         return function() {
  57.                             dm.add(txt, id)
  58.                         };
  59.                     }(txt, id), 1000 * i + 1); //指定时间点显示文字
  60.                 }
  61.             }
  62.         }
  63.     }

停止显示弹幕

当用户关闭弹幕时，可以用下列代码，也说明了上面代码中一些参数的用处

  1.     function dmStop() {
  2.         clearInterval(load_interval);
  3.         clearInterval(load_recycle_interval);
  4.         dm_time = 0;
  5.         dm_get_count = 0;
  6.         dm_pre = Array();
  7.         if (load_timeout != undefined) {
  8.             for (var i = 0; i < load_timeout.length; i++) {
  9.                 clearTimeout(load_timeout[i]);
  10.             }
  11.         }
  12.         if (recycle_load_timeout != undefined) {
  13.             for (var i = 0; i < recycle_load_timeout.length; i++) {
  14.                 clearTimeout(recycle_load_timeout[i]);
  15.             }
  16.         }
  17.     }

最终demo效果如下：

demo地址：
https://github.com/leestar54/h5-demo/blob/master/danmu.html

posted @ 2017-03-08 23:28  leestar54  阅读(5057)  评论(0)  编辑  收藏  举报