<i xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <d p="12.544,1,25,16777215,1555668046,0,3600fffd,14955772062990336, 6">来了</d>
  <d p="7.739,1,25,16777215,1555668050,0,5689bb4c,14955774128160768, 8">第一，截图见证</d>
  <d p="30.225,1,25,16777215,1555668063,0,b21ea9d5,14955781264769024, 8">国风真美！！！</d>
  <d p="25.077,1,25,16777215,1555668091,0,260d013c,14955795885588482, 7">好像真的是第一</d>
  <d p="6.46,1,25,16777215,1555668096,0,8e084014,14955798307799044, 7">我好早</d>
  <d p="11.538,1,25,16777215,1555668098,0,e3027d1f,14955799643160580, 10">来了来了！</d>
  <d p="39.019,1,25,16777215,1555668105,0,3600fffd,14955802998079490, 9">那个说第一的，你错了，00:12那个是我，我才是第一</d>
  <d p="40.484,1,25,16777215,1555668200,0,d1f6347d,14955852705824768, 1">真的美爆了！⁽⁽ଘ( ˊᵕˋ )ଓ⁾⁾</d>
</i>

{
  "code": 0,
  "data": [
    {
      "text": "来了",
      "time": 12.544,
      "color": "#FFFFFF",
      "size": 25,
      "border": false,
      "mode": 0
    },
    {
      "text": "第一，截图见证",
      "time": 7.739,
      "color": "#FFFFFF",
      "size": 25,
      "border": false,
      "mode": 0
    },
    {
      "text": "国风真美！！！",
      "time": 30.225,
      "color": "#FFFFFF",
      "size": 25,
      "border": false,
      "mode": 0
    }
  ]
}

示例

<div ref="art0" />

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

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/dm/dm.js"),
      ]).then(
        ([
          { default: ArtPlayer },
          { default: artplayerPluginDanmuku },
          { DanMu },
        ]) => {
          this.art = new ArtPlayer({
            fullscreen: true,
            autoSize: true,
            setting: true,
            container: art0,
            url: "/assets/video/s_720.mp4",
            plugins: [
              artplayerPluginDanmuku({
                danmuku: () =>
                  fetch(danmuApi)
                    .then((res) => res.arrayBuffer())
                    .then((buffer) => {
                      let d =
                        DanMu.Models.Protos.BiliBili.Dm.DmSegMobileReply.decode(
                          new Uint8Array(buffer)
                        );
                      return d.elems.map((m) => ({
                        text: m.content,
                        time: m.progress / 1000,
                        color: "#" + m.color.toString(16),
                        border: false,
                        mode: m.mode === 4 || m.mode === 5 ? 1 : 0,
                      }));
                    }),
              }),
            ],
          });
        }
      );
    });
  },
  beforeUnmount() {
    if (this.art) {
      this.art.destroy();
    }
  },
};

提示

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