在早些时候的帮助下,我修复了我的视频播放器关于通过点击播放视频的问题,但我无法弄清楚如何在点击时隐藏播放按钮叠加层。任何帮助将不胜感激。
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 class="playButton" onclick="playPause()"></div>
</div>
脚本
var bunnyVideo = document.getElementById("bVideo");
function playPause() {
if (bunnyVideo.paused)
{
bunnyVideo.play();
$(".playButton").toggle();
}
else
{
bunnyVideo.pause();
$(".playButton").toggle();
}
}
bunnyVideo.addEventListener("click", playPause, false);
答案 0 :(得分:3)
Here you go: https://jsfiddle.net/ed9o52k5/3/
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);