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

该博客详细介绍了如何使用原生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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值