ArtPlayer 弹幕

MonoLogueChi2022/5/19小于 1 分钟

介绍

适合 ArtPlayer 使用的弹幕

API V2

解析 BiliBili 弹幕

解释

bvid 视频 bvid
p 分 P，例如 1 2，省略时默认为 1
format 数据格式，json

API

/api/art/bilibili/v2/{bvid}.{format}
/api/art/bilibili/v2/{bvid}/{p:int}.{format}

示例

https://danmu.u2sb.com/api/art/bilibili/v2/BV1JP41167xK.json

<!DOCTYPE html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>demo</title>
  <style>
    .art-container {
      width: 800px;
      height: 450px;
    }
  </style>
</head>

<body>
  <h2>MessagePack 推荐</h2>
  <div id="art1" class="art-container"></div>

  <h2>JSON 不推荐</h2>
  <div id="art2" class="art-container"></div>

  <script type="module">
    import artplayer from "https://cdn.jsdelivr.net/npm/artplayer/+esm";
    import artdm from "https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/+esm";
    import { getDanMuAsync } from "/assets/js/artMsgpackDm.js";

    const Artplayer = artplayer.default;
    const artplayerPluginDanmuku = artdm.default;

    const art1 = new Artplayer({
      container: "#art1",
      url: "/assets/video/1214946209-1-192.mp4",
      fullscreen: true,
      fullscreenWeb: true,
      plugins: [
        artplayerPluginDanmuku({
          danmuku: () => getDanMuAsync("/api/art/bilibili/v2/BV1JP41167xK"),
        }),
      ],
    });

    //不推荐
    const art2 = new Artplayer({
      container: "#art2",
      url: "/assets/video/1214946209-1-192.mp4",
      fullscreen: true,
      fullscreenWeb: true,
      plugins: [
        artplayerPluginDanmuku({
          danmuku: () =>
            fetch("/api/art/bilibili/v2/BV1JP41167xK.json").then((res) =>
              res.json()
            ),
        }),
      ],
    });
  </script>
</body>

示例

<div ref="art0" />

const danmuApi = "https://danmu.u2sb.com/api/art/bilibili/v2/BV1JP41167xK";

export default {
  mounted() {
    this.$nextTick(() => {
      const art0 = this.$refs.art0;
      // 设置样式
      art0.style.width = "100%";
      art0.style.height = (art0.scrollWidth / 16) * 9 + "px";

      Promise.all([
        import("artplayer"),
        import("artplayer-plugin-danmuku"),
        import("https://danmu.u2sb.com/assets/js/artMsgpackDm.js"),
      ]).then(
        ([
          { default: ArtPlayer },
          { default: artplayerPluginDanmuku },
          { getDanMuAsync },
        ]) => {
          this.art = new ArtPlayer({
            fullscreen: true,
            autoSize: true,
            setting: true,
            container: art0,
            url: "https://danmu.u2sb.com/assets/video/1214946209-1-192.mp4",
            plugins: [
              artplayerPluginDanmuku({
                danmuku: () => getDanMuAsync(danmuApi),
              }),
            ],
          });
        }
      );
    });
  },
  beforeUnmount() {
    if (this.art) {
      this.art.destroy();
    }
  },
};

提示

一定要把 danmakuId 改掉，别 TM 傻逼呵呵的直接用我测试视频的 id 直接就写上去了，自己想办法随便生成一个随机字符串。

贡献者

MonoLogueChi