ArtPlayer 弹幕

介绍

适合 ArtPlayer 使用的弹幕

API V1

ArtPlayer 弹幕

API

• /api/artplayer/v1/{id}.{format?}
• /api/artplayer/v1/?id={id}

示例

• https://danmu.u2sb.com/api/artplayer/v1/cENuyhsT2rMOCohK
• https://danmu.u2sb.com/api/artplayer/v1/cENuyhsT2rMOCohK.json
• https://danmu.u2sb.com/api/artplayer/v1/?id=cENuyhsT2rMOCohK

解析 BiliBili 弹幕

解释

• id aid 或 bvid，例如 av810872 或 BV18b411j72u
• p 分 P，例如 1 2，省略时默认为 1
• format 数据格式，json 或 xml

API

• /api/artplayer/v1/bilibili/{id}/{p:int?}.{format?}
• /api/artplayer/v1/bilibili.{format}?bvid={id}&p={p}

示例

• https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV18b411j72u
• https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV18b411j72u.json
• https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV18b411j72u/2.json
• https://danmu.u2sb.com/api/artplayer/v1/bilibili/?bvid=BV18b411j72u

返回

<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="art"></div>

const danmakuId = "cENuyhsT2rMOCohK";
const danmakuApi = "https://danmu.u2sb.com/api/artplayer/v1";
const bilibiliDanmaku = `${danmakuApi}/bilibili/BV1zt411t79A.json`;

export default {
  mounted() {
    this.$nextTick(() => {
      Promise.all([
        import("artplayer"),
        import("artplayer-plugin-danmuku"),
      ]).then(
        ([{ default: ArtPlayer }, { default: artplayerPluginDanmuku }]) => {
          this.art = new ArtPlayer({
            fullscreen: true,
            autoSize: true,
            setting: true,
            container: this.$refs.art,
            url: "/assets/video/s_720.mp4",
            plugins: [
              artplayerPluginDanmuku({
                danmuku: () =>
                  Promise.allSettled([
                    fetch(bilibiliDanmaku).then((res) => res.json()),
                    fetch(`${danmakuApi}/${danmakuId}.json`).then((res) =>
                      res.json()
                    ),
                  ])
                    .then((res) =>
                      res
                        .filter((r) => r.status === "fulfilled")
                        .map((r) => r.value)
                    )
                    .then((res) =>
                      res
                        .filter(
                          (r) =>
                            r["code"] !== undefined &&
                            r["code"] === 0 &&
                            r["data"] !== undefined &&
                            r["data"].length > 0
                        )
                        .reduce((acc, cur) => acc.concat(cur["data"]), [])
                    ),
                speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
                opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
                fontSize: 25, // 字体大小，支持数字和百分比
                color: "#FFFFFF", // 默认字体颜色
                mode: 0, // 默认模式，0-滚动，1-静止
                margin: [10, "25%"], // 弹幕上下边距，支持数字和百分比
                antiOverlap: true, // 是否防重叠
                useWorker: true, // 是否使用 web worker
                synchronousPlayback: false, // 是否同步到播放速度
                filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
                lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
                maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
                minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
                maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
                theme: "dark", // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
                beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
              }),
            ],
          });

          this.art.on("artplayerPluginDanmuku:emit", (danmu) => {
            fetch(danmakuApi, {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
              },
              body: JSON.stringify({
                Id: danmakuId,
                Referer: window.location.origin + window.location.pathname,
                ...danmu,
              }),
            });
          });
        }
      );

      // 设置样式
      this.$refs.art.style.width = "100%";
      this.$refs.art.style.height =
        (this.$refs.art.scrollWidth / 16) * 9 + "px";
    });
  },

  beforeUnmount() {
    if (this.art) {
      this.art.destroy();
    }
  },
};

Tips

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