JS实现的视频弹幕效果示例

2023年6月11日上午1:36 • JavaScript

下面是详细讲解“JS实现的视频弹幕效果示例”的完整攻略：

简介

视频弹幕效果是目前比较流行的一种视频播放方式，也可以为网页增加一些互动性。通过JS实现的视频弹幕效果，可以让用户在看视频时发表自己的评论或者观点，同时其他用户也可以看到这些弹幕，增加了互动性。

准备工作

安装编译环境

首先需要安装编译环境，包括node.js，npm，webpack等。如果您还不会安装，可以先学习一下webpack基础知识。

下载依赖

npm install --save-dev webpack webpack-cli html-webpack-plugin style-loader css-loader postcss-loader postcss-import postcss-preset-env autoprefixer babel-loader @babel/core @babel/preset-env

在本地创建一个项目目录，如videosubtitiles。

实现步骤

添加HTML和CSS

在项目目录下创建index.html和style.css文件，并添加如下代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS实现的视频弹幕效果示例</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <video id="video" src="./video.mp4" controls></video>
    <canvas id="canvas"></canvas>
    <script src="./main.js"></script>
</body>
</html>

style.css

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events:none;
}

添加JS文件

在项目目录下创建main.js文件，并添加如下代码：

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布宽度和高度
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 改变画布大小，防止画面变形
window.onresize = function () {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

// 弹幕数组
const data = [
  { text: '红色弹幕', color: 'red', time: 2 },
  { text: '绿色弹幕', color: 'green', time: 3 },
  { text: '蓝色弹幕', color: 'blue', time: 4 }
];

let arr = [];

video.addEventListener('play', () => {
    setInterval(() => {
        arr = arr.filter(item => item.time > video.currentTime);

        while (data.length) {
            let item = data[0];

            if (item.time <= video.currentTime) {
                data.shift();
                const text = item.text;
                const color = item.color;
                const fontSize = 20;
                const speed = 4;
                const textWidth = ctx.measureText(text).width;
                const x = window.innerWidth;
                const y = getRandomNum(0, window.innerHeight - fontSize);

                arr.push({
                    text,
                    color,
                    fontSize,
                    speed,
                    x,
                    y
                });
            } else {
                break;
            }
        }

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        arr.forEach(item => {
            ctx.fillStyle = item.color;
            ctx.font = `${item.fontSize}px Arial`;

            item.x -= item.speed;

            if (item.x < -ctx.measureText(item.text).width) {
                return;
            }

            ctx.fillText(item.text, item.x, item.y);
        });
    }, 1000 / 60);

    // 获取随机数
    function getRandomNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
});

运行项目

在命令行中输入以下两条命令：

// 打包
npx webpack
// 运行项目
npx live-server

打开浏览器，在http://localhost:8080中查看项目运行效果。

示例说明1：视频弹幕基础实现

以上代码实现了视频弹幕效果的基础功能，包括了弹幕首次出现，并从右向左滚动出去。可以根据自己的需求修改弹幕的颜色、速度、大小等参数。

示例说明2：弹幕发生器实现

由于弹幕数据通常是来自于用户的输入，因此往往需要一个弹幕发生器。在此我们可以以prompt()为例，实现一个可以让用户自行输入弹幕的发生器。

// 弹幕数据
let data = [];

// 弹幕发生器
function generateSubtitle() {
    const text = prompt('请输入要发送的弹幕内容：');
    if (!text) {
        return;
    }
    const color = 'red';
    const fontSize = 20;
    const speed = 4;
    const textWidth = ctx.measureText(text).width;
    const x = window.innerWidth;
    const y = getRandomNum(0, window.innerHeight - fontSize);

    data.push({
        text,
        color,
        fontSize,
        speed,
        time: video.currentTime + 2,
        x,
        y
    });
}

// 监听键盘事件，按“s”键（即Subtitles）生成弹幕
document.addEventListener('keyup', (event) => {
    if (event.key === 's') {
        generateSubtitle();
    }
});

当用户按下键盘上的“s”键时，发生器会询问用户要发送的弹幕内容，然后将该弹幕的参数加入到了弹幕数据数组data中，并且将该弹幕出现的时间设为视频当前时间加上2秒，实现了用户自行发送弹幕的功能。

以上就是JS实现的视频弹幕效果示例的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的视频弹幕效果示例 - Python技术站