代码拉取完成，页面将自动刷新
功能完善，强大的 web 端弹幕库
项目持续维护中，如果有好的 idea，欢迎提 issue，我会尽可能的支持 🤝；
fly-barrage: web 端弹幕库，gitee 推荐项目。
fly-gesture-unlock: web 端手势解锁库。
https://fly-barrage.netlify.app/
https://fly-barrage-online.netlify.app/
npm install fly-barrage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fly Barrage</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #374B6A;
height: 100vh;
}
#container {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
}
#video {
background-color: black;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<video id="video" controls autoplay src="../public/videos/demo1.mp4"></video>
</div>
<!-- 引入 fly-barrage 立即执行文件 -->
<script src="https://cdn.jsdelivr.net/npm/fly-barrage/dist/fly-barrage.iife.js"></script>
<!-- 引入 lodash 工具库 -->
<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
<script>
// 获取弹幕渲染器 class
const { BarrageRenderer } = FlyBarrage;
// 获取 video 元素引用
const video = document.getElementById('video');
video.volume = 0.1;
// 声明弹幕内容
const barrages = [
{
"id": "e55b45c9-7f9e-48c9-9bba-4d3b53441976",
"barrageType": "scroll",
"time": 1000,
"text": "残灯无焰影幢幢，此夕闻君谪九江。",
"fontSize": 34,
"lineHeight": 1.2,
"color": "#FFFF00",
"addition": {
"grade": 2
}
}
]
// 创建弹幕渲染器实例
const barrageRenderer = new BarrageRenderer({
container: 'container',
video: video,
barrages,
renderConfig: {
heightReduce: 60,
speed: 100,
fontWeight: 'bold',
},
});
// 给 video 元素绑定 play 事件，回调函数内部调用渲染器实例的 play 方法
video.addEventListener('play', () => {
barrageRenderer.play();
});
// 给 video 元素绑定 pause 事件，回调函数内部调用渲染器实例的 pause 方法
video.addEventListener('pause', () => {
barrageRenderer.pause();
});
// container 尺寸发生了变化的话，需要调用渲染器实例的 resize 方法
// 这里需要借助 lodash 的防抖函数封装一下，不要太过频繁的调用 resize
window.onresize = _.debounce(() => {
barrageRenderer.resize();
}, 150);
</script>
</body>
</html>
<template>
<div id="container">
<video
ref="video"
id="video"
controls
autoplay
src="../src/assets/demo1.mp4"
@play="videoPlay"
@pause="videoPause"
></video>
</div>
</template>
<script setup lang="ts">
import BarrageRenderer, { BarrageOptions } from 'fly-barrage';
import { onMounted, ref } from 'vue';
const barrages: BarrageOptions[] = [
{
"id": "e55b45c9-7f9e-48c9-9bba-4d3b53441976",
"barrageType": "scroll",
"time": 100,
"text": "残灯无焰影幢幢，此夕闻君谪九江。",
"fontSize": 34,
"lineHeight": 1.2,
"color": "#FFFF00",
},
];
const barrageRenderer = ref<BarrageRenderer>();
const video = ref();
onMounted(() => {
barrageRenderer.value = new BarrageRenderer({
container: 'container',
video: video.value,
barrages,
});
})
const videoPlay = () => {
barrageRenderer.value?.play();
};
const videoPause = () => {
barrageRenderer.value?.pause();
};
</script>
<style>
* {
padding: 0;
margin: 0;
}
#container {
width: 1000px;
height: 700px;
margin: 20px auto 0;
}
#video {
width: 100%;
height: 100%;
background: black;
}
</style>
完整用法，请直接 clone 项目，安装依赖后，执行 npm run dev 即可看到完整用法
尽量使用高版本 node，我本地的版本是 v18.19.0
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型