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>

1
2
3
4
5
6
7
8
9
10

{
  "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
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 示例

点击查看

<div ref="art"></div>

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

export default {
  async 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";
    })
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

提示

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

#开源项目 #Danmu.Server

上次更新: 10/4/2022, 11:21:17 PM

← DPlayer 弹幕