如何在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);