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
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
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>
1
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
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 直接就写上去了,自己想办法随便生成一个随机字符串。
上次更新: 10/4/2022, 11:21:17 PM