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

  

posted @ 2022-11-10 15:39  花泪哲  阅读(124)  评论(0编辑  收藏  举报