前端demo逻辑系列之评分插件之弹幕

最新推荐文章于 2024-07-18 08:56:04 发布

非科班程序猿

最新推荐文章于 2024-07-18 08:56:04 发布

阅读量588

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/tjlcy2019/article/details/108037987

版权

该博客详细介绍了如何使用原生JavaScript搭建一个类似B站的弹幕效果。通过参数设置、JS逻辑分析，包括弹幕区域初始化、创建与移动弹幕、暂停功能以及事件监听等关键步骤。同时提供了源码链接，便于读者深入理解。

摘要由CSDN通过智能技术生成

弹幕

前言

本文的弹幕效果跟B站上的看起来差不多。本文demo利用原生JavaScript搭建。
本文的源码github地址https://github.com/tjlcy/BulletScreen
弹幕获取方法

在Google 浏览器中的扩展程序中下载哔哩哔哩助手，插件开启后在哔哩哔哩的视频页会看见一个粉色的方块写着助手，打开后有一个下载弹幕，可以下载xml格式的弹幕，然后可以用在线工具将弹幕数据转化成json格式的数据，便于操作。
哔哩哔哩助手下载地址：https://chrome.zzzmh.cn/info?token=kpbnombpnpcffllnianjibmpadjolanh
在这里插入图片描述

参数设置

视频区域：1120*630
每行弹幕高度：30
最多弹幕行数：16
弹幕字体大小：22
弹幕速度随机范围：100-300
（每秒移动的像素值）

js逻辑

在这里插入图片描述

1.初始化弹幕区，绑定弹幕区标签，获取弹幕区宽度，设置弹幕区的最多行数，每行弹幕的高度以及当前行初始设置为0。

2.创建弹幕函数，创建放置弹幕span标签，将它插入到弹幕区之中，然后设置弹幕内容颜色获取（传参获取到数据），之后初始化弹幕的位置，当前位置变动，设置弹幕速度（随机速度需要设置获取随机数的函数），最后存储弹幕的left和width初始的值，以便之后使用。

位置初始化

弹幕都是从右侧滚动出现，所以它的初始位置是在弹幕区的外面，即弹幕区宽度数值的位置；并且弹幕都是先第一行然后才是第二行，垂直位置由当前行数和弹幕的高度确定，例如，当前行数是2，那么垂直位置就是 top = 2*每行弹幕的高度（top是从上往下，数值递增）。

当前位置变动

一开始可能会想到直接写当前行++，但是考虑到弹幕区存在最多行数，所以要设置在当前行等于最大行数情况下回到初始化当前行数。

3.弹幕移动函数，初始化定时器，每隔一段时间执行一次，时间初始化（数字不要直接写在定时器上，不便于维护，建议写在变量上，便于后期维护），每隔一段时间遍历弹幕标签，并让弹幕的left重新赋值。
特别注意要做边缘检测

4.弹幕暂停，把定时器清除，也就是移动函数的遍历停止，并且记得让定时器回到初始状态，否则会出现累积。

5.建立事件，
视频播放时，弹幕移动函数运行

视频暂停时，弹幕暂停函数运行

视频位置变动时，创建弹幕的函数运行，遍历数据并且按照时间设置所需的弹幕，超出当前时间的弹幕不再创建（需要判断弹幕时间和当前时间的关系）

在视频当前位置改变事件中，

判断弹幕的状态（开启/关闭）
判断此时间点弹幕是否建立过
判断是否拖动
（后两个主要是判断上一次创建弹幕的时间与当前时间的关系）
6.按钮，先绑定，当点击时切换弹幕的状态。

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 视频区 -->
    <div id="container">
        <!-- 视频 -->
        <video src="./MC.mp4" id="video" controls></video>
    </div>
    <!-- 弹幕区 -->
    <div id="text-container