碼上快樂

相關內容    簡體    繁體

那些H5用到的技術（4）——彈幕

本文轉載自   查看原文   2017-03-08 23:28   3770    【09】前端開發

前言
思路
實現
模式
無限循環模式
時間線模式
停止顯示彈幕

前言

以前玩卷軸射擊游戲的時候，大量的BOSS子彈讓我們無路可逃的時候，讓我見識到了真正彈幕的威力，可自從A站B站火了之后，大量評論留言參與到了視頻的播放中，也讓我見識到了“彈幕”的威力，壓根視頻就沒法看了……全看評論去了，就是那么好玩。

現在沒有彈幕功能都不好意思說是做視頻or直播網站的。而我們也不能落后吶，產品提需求了，活動H5里面弄個彈幕留言，看起來就高大上有木有啊，以前的靜態留言形勢都太古板啦，彈幕才能用戶high起來啊！好吧，本來說這玩意已經比較成熟了，找輪子，結果發現貌似沒有html&js版本的，索性就自己寫一個吧，暫時滿足簡單的需求就行。

思路

如下圖所示

主要有3個步驟
1、生成彈幕
根據相應的參數，設置彈幕的字體大小，字體顏色，甚至是彈幕背景（VIP功能，類似QQ聊天氣泡），總之可以根據需求設計各種不同的彈幕樣式。

2、展示彈幕
生成好彈幕我們就要對其進行展示了，目前主流的展示方式有2種，一種是從屏幕的右往左漂移展示，一種是在屏幕的上、中、下進行展示，這里需要考慮到盡量避免彈幕重疊，有效率用屏幕空間，當實在是沒有空間了，才考慮重疊。

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效果如下：

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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 那些H5用到的技術（2）——音頻和視頻播放 那些H5用到的技術（1）——素材加載 那些H5用到的技術（3）——屏幕場景滑動 那些H5用到的技術（6）——數字滾動特效 H5移動端彈幕動畫實現 h5做直播的彈幕效果 H5離線緩存技術 H5的canvas繪圖技術 用H5中的Canvas等技術制作海報 H5 PWA技術以及小demo
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM