<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>播放器西瓜视频</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="//unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" type="text/javascript"></script>
<script src="vue.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="mse"></div>
</div>
<script type="text/javascript">
new Vue({
el: "#container",
data() {
return {
msg: '',
player: "",
currentTime: "",// 当前播放时间
}
},
mounted() {
this.initVideo()
},
methods: {
// 发送弹幕
send() {
var this_ = this;
this.currentTime = this.player.currentTime;
this.player.danmu.sendComment({ //发送弹幕
duration: 5000,
id: 'id' + this_.currentTime,
start: this_.currentTime * 1000,
txt: $('#mse .btnbox .content').val(),
style: {
color: '#fff',
fontSize: '20px',
borderRadius: '50px',
padding: '5px 11px',
}
})
// this.player.play(); // 继续播放
$('#mse .btnbox .content').val('');
},
// 初始化视频
initVideo() {
var temp = [];
for (let index = 0; index < 5; index++) {
var obj = {
duration: 5000, ///弹幕持续显示时间,毫秒(最低为5000毫秒)
id: '1' + index,//弹幕id，需唯一
start: 3000,//弹幕出现时间，毫秒
txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',//弹幕文字内容
// prior: true, //该条弹幕优先显示，默认false
// color: true, //该条弹幕为彩色弹幕，默认false
style: { //弹幕自定义样式
color: '#fff',
fontSize: '20px',
// border: ' 1px solid #000',
borderRadius: '50px',
padding: '5px 11px',
// backgroundColor: 'rgba(255, 255, 255, 0.1)'
},
mode: 'scroll' //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
}
temp.push(obj)
}
this.player = new Player({
id: 'mse',
autoplay: false,
volume: 0.3,
url: '3.mp4',
playsinline: true,
root: "div",
danmu: {
comments: temp,
area: { //弹幕显示区域
start: 0.1, //区域顶部到播放器顶部所占播放器高度的比例 0 -1
end: 0.8 //区域底部到播放器顶部所占播放器高度的比例
},
// closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关 (会影响点击视频播放暂停问题)
},
whitelist: [''],
closeFocusVideoFocus: true,//播放器范围时移动鼠标时触发video focus
});
var html = `<div class="btnbox">
<input type="text" class="content">
<div @click="send()" class="btn sendbtn" >发送</div>
</div>`;
// $('.xgplayer-controls').after(html)
var this_ = this;
// 向视频内增加评论输入框 （ps：全屏的时候也有输入框）
$('#mse .xgplayer-controls').append(html)
this.player.on('requestFullscreen', function () {
})
$('#mse .btnbox .sendbtn').click(function (event) {
this_.send();
})
this.player.on('controlHide', function () {
$('#mse .btnbox .content').val('');
})
// 弹幕开
this.player.on('danmuBtnOn', function (enabled) {
console.log('bullet ', this_.player.bullet);
});
// 弹幕关
this.player.on('danmuBtnOff', function (enabled) {
console.log('bullet ', this_.player.bullet);
});
}
},
})
</script>
</body>
</html>
