動画は動画の再生時にのみ制御されます（html5）

Question

私はビデオ要素を使用して自分のウェブサイトに動画を表示しています。ポスターの属性を使用して、テキストと再生ボタンがある画像を表示しました。 Javascriptでは、ビデオ要素/ポスターをクリックするとビデオが開始されると定義しました。 ビデオの再生時に表示されるビデオのコントロール（再生/一時停止ボタン、サウンド、フルスクリーン）が必要なので、ビデオを一時停止したり音量を調整したりできます。私はcontrols属性を追加しましたが、ビデオが再生されないときのコントロールも表示します。

<video id="video" class="width-100 display-none borderRadius-l breakPointM-display-inline video" poster="splashvideo.png" preload="auto" controls width="300" height="150"> 
<source src="video.mp4" type="video/mp4" /> 
</video> 

これをいくつかのjavascriptまたはcssで修正できますか？

Answer 1

これはかなり後に聞かれましたが、誰かが空になったこれに対する素晴らしい解決策を持っているかどうかを見たいと思っていました。

質問にお答えします。はい、JavascriptやCSSでこれを修正できます。

私が思いついた解決策は、ビデオをクリックしたときにJavascriptを使用してcontrols属性を追加することでした。したがって、JSを使用して再生と一時停止を処理するクリックイベントを持つのと同じように、属性「コントロール」を同時に追加または削除するだけです。

https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute ​​

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute el.removeAttribute('controls');

テスト

• クローム（56）：作品、コントロールがフェードインし、非常に迅速にフェードアウト、マウスがあるときに再び表示さビデオに移動しました
• のFirefox（52）：ワークス、マウスがビデオ
• サファリ（10）に移動されるまで、コントロールが表示されない：ワークス、コントロールは
• エッジ映像の外側にマウスを移動するまで表示されたまま：テストしていない:(

Answer 2

はい、完全な解決策は次のようになります。

HTML：ポスターはonclickを使用してクリックされたとき ビデオを再生= "this.play"

<video id="video1" class="width-100 display-none borderRadius-l breakPointM-display-inline video" 
poster="https://placehold.it/350x150" preload="auto" width="300" height="150" onclick="this.play()"> 
<source src="video.mp4" type="video/mp4" /> 
</video> 

JSコード： 一時停止した場合のコントロールを削除し再生するためのイベントリスナーを追加し、一時停止、下記再生しながら、コントロールに戻します。

var video1 = document.getElementById('video1'); 

function videoPausePlayHandler(e) { 
    if (e.type == 'playing') { 
    //add controls 
    video1.setAttribute("controls","controls"); 
    } else if (e.type == 'pause') { 
    //remove controls 
    video1.removeAttribute("controls"); 
    } 
} 

//Add event listeners 
video1.addEventListener('playing', videoPausePlayHandler, false); 
video1.addEventListener('pause', videoPausePlayHandler, false); 

あなたはここで働いて、それを見ることができます：https://jsfiddle.net/pypgjt4r/