如何在HTML5视频中隐藏播放按钮覆盖

Question

在早些时候的帮助下，我解决了我的视频播放器关于通过点击播放视频的问题，但我无法弄清楚如何在点击时隐藏播放按钮覆盖。任何帮助将不胜感激。

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); 

https://jsfiddle.net/gtoscano/ed9o52k5/2/

Answer 1

在这里你去：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);