const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url: 'video/filename.m3u8',
},
danmaku:{
id:1,
api:"https://****.com/comments/", //定义base url
maximum:1000,
bottom:"20%",
unlimited:true
}
});
# 追加弹幕
dp.danmaku.draw({time: 20.000000, type: 0, color: 15024726, author: '用户名', text: '你好,hello world' + new Date()})
配置中的id指视频唯一标记,用来在首次加载时获取视频所有的弹幕,maximum参数为获取的条数
后端需要实现 https://****.com/comments/v3 接口(get 和 post请求)
post 请求参数:{
"id":1,
"author":"DIYgod",
"time":7.581529,
"text":"fff",
"color":16777215,
"type":0
}
自行决定是否存储,以及存储介质,响应{code:0,data:[]}
get请求 ?id=1&max=1000,返回视频所有弹幕,需要注意的是,返回的字段没有key
{
"code": 0,
"data": [
[0, 0, 15024726, "用户名", "你好,hello world!"]
]
}
对应关系参考:https://github.com/DIYgod/DPlayer/blob/master/src/js/api.js
data.data.map((item) => ({
time: item[0],
type: item[1],
color: item[2],
author: item[3],
text: item[4],
}))
如果觉得不合适,可以自行编译dplayer,修改此处