码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2017-03-09 00:16:46      阅读：5394      评论：0      收藏：0      [点我收藏+]

标签：https   default   不同的   als   完全   select   abs   ack   简单   

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

前言

以前玩卷轴射击游戏的时候，大量的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

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

标签：https   default   不同的   als   完全   select   abs   ack   简单   

原文地址：http://www.cnblogs.com/leestar54/p/6523620.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！