axdmin/fly-barrage: ヾ(*´▽‘*)ﾉ👑🐋🎉功能完善，强大的 web 端弹幕库（Fully functional and powerful web-based barrage library）。包含完整 DEMO，可快速上手。觉得不错，Star 一下🌟🌟🌟｡

ヾ(*´▽‘*)ﾉ👑🐋🎉功能完善，强大的 web 端弹幕库（Fully functional and powerful web-based barrage library）。包含完整 DEMO，可快速上手。觉得不错，Star 一下🌟🌟🌟｡ https://fly-barrage.netlify.app/

48 提交歷史

4 Branches

4 版本發佈

付飞 0ac3eff8eb release: v2.2.0		1 月之前
docs	e3724a66ba Merge branch 'refs/heads/feature-2'	1 月之前
lib	7ba0e5ab1b feat: [feature-2] 提供 prior 边框的自定义渲染函数	1 月之前
public	3379abe486 docs: 优化在线体验	2 月之前
scripts	977dfe95bd chore: 优化 push-remote.js 脚本	2 月之前
src	7ba0e5ab1b feat: [feature-2] 提供 prior 边框的自定义渲染函数	1 月之前
src-iife	c992632275 docs: 变更 DEMO 中的 cdn 链接	1 月之前
.gitattributes	70b604901c chore: add .gitattributes	2 月之前
.gitignore	2d2f9e505e 完整版本	2 月之前
BUGFIX.md	9e0fe67146 增加 md 文件	2 月之前
CHANGELOG.md	39030a373e docs: [feature-2] 相关记录文档变更	1 月之前
FEATURE.md	39030a373e docs: [feature-2] 相关记录文档变更	1 月之前
LICENSE	20cf4eaa31 License change	2 月之前
README.md	e3724a66ba Merge branch 'refs/heads/feature-2'	1 月之前
README.zh.md	e3724a66ba Merge branch 'refs/heads/feature-2'	1 月之前
index.html	2d2f9e505e 完整版本	2 月之前
package.json	0ac3eff8eb release: v2.2.0	1 月之前
tsconfig.json	2d2f9e505e 完整版本	2 月之前
vite-demo.config.ts	3379abe486 docs: 优化在线体验	2 月之前
vite.config.ts	2d2f9e505e 完整版本	2 月之前

✨ Fly Barrage

Fully functional and powerful web-based barrage library

In the ongoing maintenance of the project, if there is a good idea, please feel free to raise an issue, and I will do my best to support it 🤝；

🎉 All of my open source libraries

fly-barrage: Web based barrage library, recommended by Gitee.

gitee: https://gitee.com/fei_fei27/fly-barrage;

github: https://github.com/feiafei27/fly-barrage;

fly-gesture-unlock: Web based gesture unlocking library.

gitee: https://gitee.com/fei_fei27/fly-gesture-unlock;

github: https://github.com/feiafei27/fly-gesture-unlock;

🎥 Rendering Effects

📝 Official Website

https://fly-barrage.netlify.app/

🎄 Online Experience

https://fly-barrage-online.netlify.app/

📥 Install

npm install fly-barrage

🌍 Usage(native version)

<!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>

🌍 Usage(Vue3 + TS version)

<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>

For complete usage, please clone the project directly, install the dependencies, and then execute npm run dev to view the complete usage

Try to use a higher version of the node version, my local version is v18.19.0

🌲 License

MIT License

README.md