首先我们要知道这个报错是因为你把实例化的EasyDanmaku中的el绑定给了父元素或者,video自己,导致读不到特定的元素
修改:添加一个元素使其绝对定位到video上面,(后面附着的有代码),并且不能使用loop属性,否则,暂停的时候只能一轮,第二轮就报错了
这个时候就会出现另外一个问题,video鼠标进入事件被item遮挡,此时我们可以使用 pointer-events: none;,然后给item里面的div修改回来pointer-events: auto;
代码:
<!DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
.box {
width: 1000px;
position: relative;
}
video {
width: 100%;
}
.box .item {
width: 100%;
height: 90%;
position: absolute !important;
top: 0;
left: 0;
/* background-color: red; */
pointer-events: none;
}
.box .item>div {
pointer-events: auto;
}
</style>
</head>
<body>
<div class="box">
<video controls="controls" loop="loop" autoplay="autoplay" muted>
<source
src="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4"
type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<div class="item"></div>
</div>
<button class="btn">发送弹幕</button>
<script src="js/jquery.min.js"></script>
<script src="js/easy-Danmaku.js"></script>
<script>
const Danmaku = new EasyDanmaku({
el: '.item', //弹幕挂载节点
colourful: true, //彩色弹幕
line: 10, //弹幕行数
wrapperStyle: 'danmaku-wrapper', //默认弹幕样式
speed: 8, //弹幕播放速度
// runtime: 10, //播放一次的时常
// loop: true, //开启循环播放
hover: true, //鼠标移入悬停
onComplete: () => { //播放结束
send()
}, //hover时 参数为该悬停元素(初始化属性hover必须为true)
onHover: (dom) => {
// console.log(dom);
}
})
let state = 0
var video = document.querySelector('video')
/*循环播放弹幕 前提初始化属性hover:true*/
function send() {
const data = ['danmaku1', 'danmaku2', 'danmaku3', 'danmaku4', 'danmaku5', 'danmaku1', 'danmaku2', 'danmaku3', 'danmaku4', 'danmaku5', 'danmaku1', 'danmaku2', 'danmaku3', 'danmaku4', 'danmaku5', 'danmaku1', 'danmaku2', 'danmaku3', 'danmaku4', 'danmaku5', 'danmaku6']
Danmaku.batchSend(data)
}
send()
$('.btn').click(function (e) {
e.preventDefault();
// console.log(111);
// Danmaku.send('我很喜欢你', 'danmaku-wrapper', (e) => {
// console.log(e);
// })
if (state == 0) {
video.pause()
Danmaku.pause()
}
else {
video.play()
Danmaku.play()
}
state = 1 - state
});
// setInterval(() => {
// //弹幕内容 弹幕样式 持续时间(ms) 回调函数
// Danmaku.centeredSend('你好啊', 'danmaku-wrapper', 1000, (e) => {
// })
// }, 2000)
</script>
</body>
</html>
如果还有不懂得,可以留言,我们一起探讨。