HTML5ビデオコントロールで再生をクリックしても、再生ボタンオーバーレイがなくなりません。

Question

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/

Answer 1

ない最もエレガントに、これは単にトリガーにオーバーレイを設定し、再生/一時停止とは、ビデオの挙動

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

Answer 2

はトンを追加します彼のCSSファイル、あなたのオーバーレイの状態を変更するには、ビデオ自体の再生/一時停止イベントを追跡する必要が

#playButton {display: none; } 
#playButton.playButton {display: inline; } 

Answer 3

これが最もエレガント/プロフェッショナルなソリューションですが、それは仕事をしていませんかどうかわからないに基づいてトリガされます別のイベントのボタンを示す/隠しを処理します。私は、再生/一時停止イベントでビデオ自体にイベントリスナーをアタッチし、そのオーバーレイが表示されるかどうかを判断するクラスである 'playButton'クラスのオン/オフを切り替えました。また、.onplayイベントリスナーが処理するので、あなたのplayPause関数からこれらの行を削除しました。

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"; 
};