flv.js仿B站弹幕html,利用jQuery实现仿哔哩哔哩视频弹幕代码

特效描述：利用jQuery实现 仿哔哩哔哩 视频弹幕代码。利用jQuery实现仿哔哩哔哩视频弹幕代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

24

人正在观看,100条弹幕

• 时间
• 发送内容
• 用户类型

加载中

console.log(" %c 该项目基于Dplayer.js",'color:red')

var dp = new DPlayer({

element: document.getElementById('player1'),

video: {

url: 'http://oz4nlgp7a.bkt.clouddn.com/ss.mp4',

pic: 'css/danmu.jpg'

},

danmaku: {

id: 'demo',

api: 'https://api.prprpr.me/dplayer/',

addition: ['https://api.prprpr.me/dplayer/bilibili?aid=15572523']

}

});

// 弹出框

function alert_back(text) {

$(".alert_back").html(text).show();

setTimeout(function () {

$(".alert_back").fadeOut();

},1200)

}

//秒转分秒

function formatTime(seconds) {

return [

// parseInt(seconds / 60 / 60),

parseInt(seconds / 60 % 60),

parseInt(seconds % 60)

]

.join(":")

.replace(/\b(\d)\b/g, "0$1");

}

$.ajax({

url:"https://api.prprpr.me/dplayer/bilibili?aid=15572523",

success:function (data) {

if(data.code=="1"){

var danmaku=data.danmaku;

var autor="农民";

$(".danmuku_num").text(danmaku.length)

$(danmaku).each(function (index,item) {

if(item.type=="right"){

}else

{

autor="地主"

}

var oLi=`

1. ${formatTime(item.time)}
2. ${item.text}
3. ${autor}

`

$(".list_ovefiow").append(oLi);

autor="农民";

})

}else {

alert_back("弹幕加载失败 -v-!");

}

$(".danmuku_list").on("click",function () {

dp.seek( $(this).attr("time"))

})

}

})