HTML5ビデオのフォーカスを検出する

Question

youtubeを使用しているときと同じように、「再生」または「一時停止」をクリックすると、ビデオにフォーカスがあり、spacebarはビデオを一時停止または再生します。

同じ行で、HTML5ビデオで再生した後で、spacebarアクションを防止したいと思います。 これを行うには、フォーカスされた要素を検出しようとしていましたが、ビデオ要素が同じ方法でfocusイベントを取得しないようです。

私はそれのためのjQueryを使用してみましません：

$(':focus'); 

とプレーンJavascriptを：成功と

document.activeElement 

なし。

Answer 1

あなたのvideo要素にイベントリスナーを追加し、プレイイベントにページ上の他のいくつかの（フォーカス可能な）要素など何も

var video=document.getElementById("MyVideo"); 

video.addEventListener('play', function() { 
    document.getElementById("myDummyButton").focus(); 
}); 

これはあなたのvideo要素からフォーカスを奪うませんんダミーのボタンを集中動画が再生されるとすぐにダミーボタンに移動します。ポーズイベントでも同じことができます。

ボタンをビデオ要素の近くに慎重に配置します。画面上のページの下のどこかに配置すると、ページがスクロールするため、ビデオ要素の近くにボタンを配置します。 また、すべてのタイプの要素は焦点を合わせることができません。あなたがビデオ要素にキーイベントをフィルタリングできるようにするには、キーイベントハンドラを追加することができます

document.getElementByID("video").onfocus = function(){} 

Answer 2

使用。

video.addEventListener("keydown", function(evt) { 
    /* check the key you don't want and if hit call: */ 
    evt.preventDefault(); 
}, false); 

あなたはそれはあなたが実際に行うには、すでに

<video tabindex="1" /* etc. */ ></video> 

Answer 3

：このような