代码拉取完成,页面将自动刷新
同步操作将从 fufei/fly-barrage 弹幕库 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
功能完善,强大的 web 端弹幕库
https://fly-barrage.netlify.app/
npm install fly-barrage
<!-- 这里使用 Vue 框架作为例子,本库并不局限于特定框架 -->
<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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。