• 那些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
  • 相关阅读:
    MVC3分页传2参
    C# 二进制存储图片到mssql（一）
    著名黑客组织[转]
    浅看C# md5加密
    google搜索技巧
    字符串编码转换 GBK utf8
    objectivec 中随机数的用法 （3种：arc4random() 、random()、CCRANDOM_0_1() ）
    NSPredicate的用法
    Java关键字final、static使用总结()
    CGAffineTransform相关函数
  • 原文地址：https://www.cnblogs.com/leestar54/p/6523620.html
Copyright © 2020-2023  润新知