思享工具箱

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

摘要：
屏幕上的弹出模式未实现…id:auto increment txt：用户输入的弹出时间：用户提交时的总秒数。当用户进入页面时，弹出时间从0秒开始增加。提交时的总数为当时的总数。如果视频已提交，则为当时的播放时间。

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

前言

以前玩卷轴射击游戏的时候，大量的BOSS子弹让我们无路可逃的时候，让我见识到了真正弹幕的威力，可自从A站B站火了之后，大量评论留言参与到了视频的播放中，也让我见识到了“弹幕”的威力，压根视频就没法看了……全看评论去了，就是那么好玩。
那些H5用到的技术（4）——弹幕第1张
现在没有弹幕功能都不好意思说是做视频or直播网站的。而我们也不能落后呐，产品提需求了，活动H5里面弄个弹幕留言，看起来就高大上有木有啊，以前的静态留言形势都太古板啦，弹幕才能用户high起来啊！好吧，本来说这玩意已经比较成熟了，找轮子，结果发现貌似没有html&js版本的，索性就自己写一个吧，暂时满足简单的需求就行。

思路

如下图所示
那些H5用到的技术（4）——弹幕第2张
主要有3个步骤
1、生成弹幕
根据相应的参数，设置弹幕的字体大小，字体颜色，甚至是弹幕背景（VIP功能，类似QQ聊天气泡），总之可以根据需求设计各种不同的弹幕样式。

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

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

实现

话不多说，上代码看注释

    

  1. /**
    2. 

  2.  *  by Leestar54
    3. 

  3.  *  简易弹幕插件 V1.0
    4. 

  4.  */
    5. 

  5. ;
    6. 

  6. (function($) {
    7. 

  7.     $.fn.danmu = function(options) {
    8. 

  8.         //默认参数
    9. 

  9.         var defaults = {
    10. 

  10.             fontSize: 16,
    11. 

  11.             color: 'black',
    12. 

  12.             showTime: 10000
    13. 

  13.         }
    14. 

    15. 

  15.         //使用jQuery.extend 覆盖插件默认参数
    16. 

  16.         var options = $.extend(defaults, options);
    17. 

    18. 

    19. 

  19.         var hideTime = defaults.showTime + 500;
    20. 

  20.         //弹幕的行数
    21. 

  21.         var dm_lines = Math.floor($(this).height() / 16);
    22. 

    23. 

  23.         //当前弹幕行是否有空间进行显示
    24. 

  24.         var dm_line_empty = Array(dm_lines);
    25. 

  25.         for (var i = 0; i < dm_line_empty.length; i++) {
    26. 

  26.             dm_line_empty[i] = true;
    27. 

  27.         }
    28. 

    29. 

  29.         //中文和英文的宽度要分别算
    30. 

  30.         function getDivWidth(txt, fontSize) {
    31. 

  31.             var len = 0;
    32. 

  32.             var charRatio = fontSize * 5 / 8;
    33. 

  33.             for (var i = 0; i < txt.length; i++) {
    34. 

  34.                 if (txt[i].match(/[^x00-xff]/ig) != null) //全角中文
    35. 

  35.                     len += fontSize;
    36. 

  36.                 else
    37. 

  37.                     len += charRatio; //非中文经过测试得出比例
    38. 

  38.             }
    39. 

  39.             return len;
    40. 

  40.         }
    41. 

    42. 

  42.         //公开函数
    43. 

  43.         this.add = function(txt, id, line, color, fontSize) {
    44. 

  44.             if (txt === undefined || txt === '') {
    45. 

  45.                 //抛出异常
    46. 

  46.                 throw 'txt should not be null';
    47. 

  47.             }
    48. 

  48.             if (line === undefined || line === '') {
    49. 

  49.                 for (var i = 0; i < dm_line_empty.length; i++) {
    50. 

  50.                     if (dm_line_empty[i]) {
    51. 

  51.                         dm_line_empty[i] = false;
    52. 

  52.                         line = i;
    53. 

  53.                         break;
    54. 

  54.                     }
    55. 

  55.                 }
    56. 

  56.                 //如果都满了，就随机覆盖了
    57. 

  57.                 if (line === undefined || line === '') {
    58. 

  58.                     line = Math.floor(Math.random() * dm_lines);
    59. 

  59.                 }
    60. 

  60.             }
    61. 

  61.             if (color === undefined || color === '') {
    62. 

  62.                 color = defaults.color;
    63. 

  63.             }
    64. 

  64.             if (fontSize === undefined || fontSize === '') {
    65. 

  65.                 fontSize = defaults.fontSize;
    66. 

  66.             }
    67. 

  67.             if (id === undefined || id === '') {
    68. 

  68.                 id = Math.floor(Math.random() * 100000000);
    69. 

  69.             }
    70. 

  70.             //使用dom构造单个弹幕div
    71. 

  71.             var div = document.createElement("div");
    72. 

  72.             div.id = 'txt_dm' + id;
    73. 

  73.             div.innerHTML = txt;
    74. 

  74.             div.style.webkitAnimation = 'run 1s 8s linear forwards';
    75. 

  75.             div.style.position = 'absolute';
    76. 

  76.             div.style.top = line * fontSize + 'px';
    77. 

  77.             div.style.left = $(this).width() + 'px';
    78. 

  78.             //设置宽度，否则字体会自适应换行，影响显示
    79. 

  79.             div.style.width = getDivWidth(txt, fontSize) + 'px';
    80. 

  80.             div.style.fontSize = fontSize + 'px';
    81. 

  81.             div.style.color = color;
    82. 

  82.             $(this).append(div);
    83. 

  83.             $(div).velocity({
    84. 

  84.                     translateX: '-' + ($(this).width() + $(div).width()) + 'px'
    85. 

  85.                 },
    86. 

  86.                 defaults.showTime,
    87. 

  87.                 'linear');
    88. 

    89. 

  89.             //屏幕完全显示完弹幕，就可以添加下一条了, +1为了用一定缓冲距离
    90. 

  90.             var fullShowTime = Math.floor($(div).width() / $(this).width() * defaults.showTime);
    91. 

  91.             setTimeout(function() {
    92. 

  92.                 dm_line_empty[line] = true;
    93. 

  93.             }, fullShowTime);
    94. 

    95. 

  95.             //删除显示完的弹幕
    96. 

  96.             setTimeout(function() {
    97. 

  97.                 $('#txt_dm' + id).remove();
    98. 

  98.             }, hideTime);
    99. 

  99.         }
    100. 

    101. 

  101.         return this;
    102. 

  102.     }
    103. 

  103. })(jQuery);
    104.

需要注意的是

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

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

    

  1. var dm = $('.container').danmu();
    2. 

  2. dm.add('123');
    3. 

  3. dm.add('双击66666666666666666');
    4. 

  4. dm.add('老铁没毛病！')
    5.
模式

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

无限循环模式

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

    

  1.     //--------------------------------重复展示弹幕----------------------------------------
    2. 

  2.     //重复展示时间间隔，如果弹幕少，就设置小一些，这样重复的多。
    3. 

  3.     var recycle_time = 10;
    4. 

  4.     var load_recycle_interval;
    5. 

  5.     var recycle_load_timeout;
    6. 

  6.     //重复展示弹幕
    7. 

  7.     function dmRecycleStart(data) {
    8. 

  8.         for (var i = 0; i < data.length; i++) {
    9. 

  9.             var id = data[i]['id'];
    10. 

  10.             var txt = data[i]['txt'];
    11. 

  11.             //闭包&立即执行传递参数，返回新的方法，否则add方法会被立即执行
    12. 

  12.             recycle_load_timeout[i] = setTimeout(function(txt, id) {
    13. 

  13.                 return function() {
    14. 

  14.                     dm.add(txt, id);
    15. 

  15.                 };
    16. 

  16.             }(txt, id), 1000 * Math.floor(Math.random() * recycle_time) + 1); //随机时间点显示文字
    17. 

  17.         }
    18. 

  18.     }
    19. 

    20. 

  20.     recycle_load_timeout = Array(data.length);
    21. 

    22. 

  22.     //先显示一次
    23. 

  23.     dmRecycleStart(data);
    24. 

  24.     //然后每隔一段时间都展示一次
    25. 

  25.     load_recycle_interval = setInterval(function() {
    26. 

  26.         dmRecycleStart(data);
    27. 

  27.     }, recycle_time * 1000);
    28.

时间线模式

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

    

  1.     public function getdm()
    2. 

  2.     {
    3. 

  3.         $start_time = I('get.start_time');
    4. 

  4.         $end_time   = I('get.end_time');
    5. 

  5.         $mode       = I('get.type');
    6. 

  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. 

  7.         $ret        = array();
    8. 

  8.         //根据时间进行分组
    9. 

  9.         foreach ($db_result as $key => $value) {
    10. 

  10.             $ret[$value['ptime']][] = array($value['id'], $value['txt']);
    11. 

  11.         }
    12. 

  12.         $this->ajaxReturn($ret);
    13. 

  13.     }
    14.

JS代码参考如下：

    

  1.     //---------------------------------时间线弹幕-----------------------------------------
    2. 

  2.     var dm_get_count = 0;
    3. 

  3.     //用户提交弹幕的时候，时间参数可以以此为基准。
    4. 

  4.     var dm_time = 0;
    5. 

  5.     var load_interval;
    6. 

  6.     var load_timeout;
    7. 

    8. 

  8.     //加载弹幕
    9. 

  9.     function dmLoadTimeLine() {
    10. 

  10.         //每秒钟执行一次，更新时间，这里设置为每30秒为间隔显示一次弹幕（16秒开始预加载），根据时间点投放
    11. 

  11.         load_interval = setInterval(function() {
    12. 

  12.             if (dm_time % 16 == 0) {
    13. 

  13.                 var start_time = dm_get_count * 30;
    14. 

  14.                 var end_time = (dm_get_count + 1) * 30;
    15. 

  15.                 //中间预加载
    16. 

  16.                 // $.get('./getdm', {
    17. 

  17.                 //     start_time: start_time,
    18. 

  18.                 //     end_time: end_time,
    19. 

  19.                 //     type: typeid,
    20. 

  20.                 // }, function(data) {
    21. 

  21.                 dm_pre = line_data;
    22. 

  22.                 console.log(start_time + '-' + end_time + '预加载完成');
    23. 

  23.                 //第一次加载完成直接显示
    24. 

  24.                 if (dm_get_count == 0) {
    25. 

  25.                     dmTimeLineStart();
    26. 

  26.                 }
    27. 

    28. 

  28.                 dm_get_count++;
    29. 

  29.                 // });
    30. 

    31. 

  31.             } else if (dm_time % 30 == 0) {
    32. 

    33. 

  33.                 dmTimeLineStart();
    34. 

  34.             }
    35. 

  35.             dm_time++;
    36. 

  36.         }, 1000);
    37. 

  37.         //每秒1个弹幕，30秒则有30个
    38. 

  38.         load_timeout = Array(30);
    39. 

  39.     }
    40. 

    41. 

  41.     //时间线弹幕
    42. 

  42.     function dmTimeLineStart() {
    43. 

  43.         var start_time = dm_get_count * 30;
    44. 

  44.         var end_time = (dm_get_count + 1) * 30;
    45. 

  45.         console.log(start_time + '-' + end_time + '显示弹幕');
    46. 

  46.         //深度拷贝数组，如果是从接口获取数据，最好拷贝一次。
    47. 

  47.         var dm_current = $.extend(true, {}, dm_pre);
    48. 

  48.         //时间点内显示弹幕
    49. 

  49.         for (var i = start_time; i < end_time; i++) {
    50. 

  50.             if (dm_current[i] != null) {
    51. 

  51.                 for (var j = 0; j < dm_current[i].length; j++) {
    52. 

  52.                     var id = dm_current[i][j]['id'];
    53. 

  53.                     var txt = dm_current[i][j]['txt'];
    54. 

  54.                     //内部函数立即执行，闭包传递参数，
    55. 

  55.                     load_timeout[i] = setTimeout(function(txt, id) {
    56. 

  56.                         return function() {
    57. 

  57.                             dm.add(txt, id)
    58. 

  58.                         };
    59. 

  59.                     }(txt, id), 1000 * i + 1); //指定时间点显示文字
    60. 

  60.                 }
    61. 

  61.             }
    62. 

  62.         }
    63. 

  63.     }
    64.

停止显示弹幕

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

    

  1.     function dmStop() {
    2. 

  2.         clearInterval(load_interval);
    3. 

  3.         clearInterval(load_recycle_interval);
    4. 

  4.         dm_time = 0;
    5. 

  5.         dm_get_count = 0;
    6. 

  6.         dm_pre = Array();
    7. 

  7.         if (load_timeout != undefined) {
    8. 

  8.             for (var i = 0; i < load_timeout.length; i++) {
    9. 

  9.                 clearTimeout(load_timeout[i]);
    10. 

  10.             }
    11. 

  11.         }
    12. 

  12.         if (recycle_load_timeout != undefined) {
    13. 

  13.             for (var i = 0; i < recycle_load_timeout.length; i++) {
    14. 

  14.                 clearTimeout(recycle_load_timeout[i]);
    15. 

  15.             }
    16. 

  16.         }
    17. 

  17.     }
    18.

最终demo效果如下：
那些H5用到的技术（4）——弹幕第4张

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

标签：#var | 浏览：496 | 发布日期：

免责声明：文章转载自《那些H5用到的技术（4）——弹幕》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Spring Boot：整合Hikari+Oracle+p6spyJmeter获取数据库值并作为参数请求（转载）下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

bootstrap下拉列表重置联动

/**添加&修改时--获取机柜号**/ function BindSelectJgh(jiguiColumnIdD, jiguiNumberIdD) { var jid = !jiguiColumnIdD ? $('#jiguiColumnId').val() : jiguiColumnIdD; var jg...

高性能javascript笔记：浏览器中DOM操作的性能优化(二)

　　关于浏览器中DOM操作的性能优化，在上一篇博文《浏览器中DOM操作的性能优化(一)》中已经阐述了访问和修改DOM元素对性能的影响及优化方案。这次我们就来说一下关于页面的重绘和重排版问题。 　　当浏览器下载完所有的HTML标签和其组件(Javascript，css，图片等)后，浏览器就会解析文件并创建两个内部数据结构：　　1、DOM Tree ：表示页面...

js 光标位置处理

/** * 获取选中文字 * 返回selection,toString可拿到结果,selection含有起始光标位置信息等 **/ function getSelectText() { var text, userSelection = window.getSelection()||document.se...

[转载]JS拖动技术 关于setCapture

<script type="text/javascript"><!--window.onload=function(){objDiv = document.getElementByIdx('drag');drag(objDiv);}; function drag(dv){dv.onmousedown=function(e){var d=...

使用multer搭建一个图片接收服务器

为了测试图片上传插件的上传功能是否好用，最近尝试搭建了一个接收图片的服务器，因为图片上传的编码格式是form-data，所以我选择使用express+multer，实现过程中发现有几个需要注意的地方，在这里和大家分享下。 1 引入express和multer 这里没什么好说的，安装好包文件后，引入文件。 var express = require('exp...

C# 获取 串口 设备名称 与 串口号 ManagementObjectSearcher类

1.效果图： 2.代码 classProgram { static void Main(string[] args) { GetComList(); } private static voidGetComList() {try{...

最新文章

随机推荐

思享工具箱导航