弹幕的实现

最新推荐文章于 2024-05-06 22:41:43 发布

diaolanbeng0962

最新推荐文章于 2024-05-06 22:41:43 发布

阅读量1.5k

点赞数

文章标签：网络前端 ViewUI

原文链接：http://www.cnblogs.com/leaf930814/p/8427461.html

版权

本文探讨了弹幕在视频、直播等场景的应用，强调弹幕互动性但需避免过度密集。分析了好弹幕应具备的要素，如分布、时机、速度、颜色等，并提出通过算法优化弹幕排列与速度控制。同时，提到了后台实现可能采用WebSocket或Node.js，弹幕内容需过滤敏感词。最后，分享了早期的前端弹幕实现，未涉及复杂分布与速度调控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

　　今天浏览某网站看到一个活动页有内嵌的弹幕模块（图一），但是看到移动的弹幕重叠很多，不忍直视啊。突然想起很久之前自己写写过类似的弹幕，就翻出来看了一下，呵，也是不忍直视的，最后再附上当年的效果以及代码；

二、大话几点

1、弹幕应用场景，视频中，直播中，微信墙等；

2、弹幕增加了大家的互动性，不再是单纯的傻白甜的看着视频，还可以吐吐槽，增加趣味性，但对于密集恐惧症的我，每当一大波弹幕来袭，我习惯性的cut off；

3、现在视频类的弹幕页面一般内嵌到视频中，微信墙等互动弹幕页面一般用h5实现，呈现的方式都差不多，有的弹幕可以每条进行操作，有的只能看。有的弹幕每条弹幕还要根据用户的相关等级，然后展示不同的效果，满足不同玩家的诉求，各种玩；

4、好的弹幕应该至少满足：弹幕分布密度，出现时机，速度，颜色，字体大小等都要做的相得益彰，至少能吸引大家进行互动。这就要考虑要一定的算法了，后面说。比如b站的弹幕就做的很好；

5、弹幕的后台实现可以通过websocket实现，当然也可以借助node实现。当用户输入弹幕，弹幕需经过特殊处理，比如经过第三方（数美等）过滤敏感关键字等，最后再把内容下发，觜最后展示；

三、思考：怎么做到弹幕均匀排布，不会重叠呢？还有速度控制问题。

1、可以想象把弹幕面板分成几个管道，每条弹幕随机分配（当然不是简单的随机，应该加上点概率论的知识）到每条管道中，当前方有弹幕时候，该弹幕的位置就要与前方弹幕保持一定计算的距离；

2、每条弹幕的速速要结合当前弹幕的长度和移动的位置去动态的添加初始速度，当然运行速度可以可以有linear ease-in ease-out ...等把控；

四、最后

很久前写的弹幕，没有对弹幕分布和速度进行把控，当然也没有后台，纯粹前端展示了，我就不折腾了。

　　-------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>barrage</title>
  <style>
    .box{
      width: 800px;
      height: 500px;
      margin:0 auto;
    }
    .barrage-container-wrap{
        width: 100%;
        height: 500px;
        position: relative;
        overflow: hidden;
        background: url('./img/bg.jpg') no-repeat;
        background-size: 100% 100%;
    }
    .barrage-contain

最低0.47元/天解锁文章