[英]Clicking play on HTML5 video controls doesn't get rid of my Play button overlay
我的HTML5视频播放器有一个错误。 我以为我可以轻松修复它,但它看起来并不那么容易。 当您单击叠加层时,视频播放,并且叠加层消失。 但是我注意到,在视频开始播放时,HTML5视频控件上的点击播放(不是我的重叠式广告)并没有消除播放按钮的重叠式广告
的HTML
<div class="video-wrapper">
<video class="video" id="bVideo" loop controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
</div>
脚本
var bunnyVideo = document.getElementById("bVideo");
function playPause() {
var el = document.getElementById("playButton");
if (bunnyVideo.paused) {
bunnyVideo.play();
el.className ="";
} else {
bunnyVideo.pause();
el.className = "playButton";
}
}
bunnyVideo.addEventListener("click", playPause, false);
这是我的小提琴: https : //jsfiddle.net/wm3ot3ko/
您还需要跟踪视频本身的播放/暂停事件,以更改叠加层的状态
并非最优雅,但这会将叠加层设置为仅触发播放/暂停,并处理在单独事件(根据视频行为触发)上的隐藏/显示按钮
var el = document.getElementById("playButton");
function playPause() {
if (bunnyVideo.paused) {
bunnyVideo.play();
} else {
bunnyVideo.pause();
}
}
function playPause2() {
if (!bunnyVideo.paused) {
el.className ="";
} else {
el.className = "playButton";
}
}
bunnyVideo.addEventListener("click", playPause, false);
bunnyVideo.addEventListener("play", playPause2, false);
bunnyVideo.addEventListener("pause", playPause2, false);
将此添加到您的css文件
#playButton {display: none; }
#playButton.playButton {display: inline; }
不知道这是否是最优雅/专业的解决方案,但确实可以。 我只是在播放/暂停事件上将事件侦听器附加到视频本身,然后打开/关闭“ playButton”类,该类确定该叠加层是否可见。 我还从您的playPause函数中删除了这些行,因为.onplay事件侦听器将进行处理。
var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
function playPause() {
if (bunnyVideo.paused) {
bunnyVideo.play();
} else {
bunnyVideo.pause();
}
}
bunnyVideo.addEventListener("click", playPause, false);
bunnyVideo.onplay = function() {
el.className ="";
};
bunnyVideo.onpause = function() {
el.className ="playButton";
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.