dplayer 弹幕
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,修改此处