[英]Clicking play on HTML5 video controls doesn't get rid of my Play button overlay
My HTML5 video player has a bug. 我的HTML5视频播放器有一个错误。 I thought I could fix it easily but it is not looking to be that easy. 我以为我可以轻松修复它,但它看起来并不那么容易。 When you click the overlay the video plays and the overlay disappears. 当您单击叠加层时,视频播放,并且叠加层消失。 But I noticed at the start of the video clicking play (not my overlay) on HTML5 video controls doesn't get rid of my play button overlay 但是我注意到,在视频开始播放时,HTML5视频控件上的点击播放(不是我的重叠式广告)并没有消除播放按钮的重叠式广告
HTML 的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>
Script 脚本
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);
Here is my fiddle: https://jsfiddle.net/wm3ot3ko/ 这是我的小提琴: https : //jsfiddle.net/wm3ot3ko/
you need to also track the play/pause events on the video itself to change the state of your overlay 您还需要跟踪视频本身的播放/暂停事件,以更改叠加层的状态
not the most elegant, but this sets the overlay to just trigger play/pause and handles hiding/showing the button on a separate event that gets triggered based on the video behavior 并非最优雅,但这会将叠加层设置为仅触发播放/暂停,并处理在单独事件(根据视频行为触发)上的隐藏/显示按钮
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);
add this to your css file 将此添加到您的css文件
#playButton {display: none; }
#playButton.playButton {display: inline; }
Not sure if this is the most elegant/professional solution but it does the job. 不知道这是否是最优雅/专业的解决方案,但确实可以。 I just attached an event listener to the video itself on the play/pause events and toggled the 'playButton' class on/off, which is the class that determines whether that overlay is visible. 我只是在播放/暂停事件上将事件侦听器附加到视频本身,然后打开/关闭“ playButton”类,该类确定该叠加层是否可见。 I also removed those lines from your playPause function since the .onplay event listener will take care of it. 我还从您的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.