ArtPlayer 弹幕
大约 1 分钟
介绍
适合 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="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 直接就写上去了,自己想办法随便生成一个随机字符串。