1

フルスクリーンモードでHTML5ビデオを視聴しているときに、ユーザーがエスケープキーを押したときを知る必要があります。残念ながら、ユーザーがフルスクリーンモードでHTML5ビデオを視聴している場合、システムの焦点はブラウザーではなくネイティブビデオプレーヤーにあるため、ドキュメントに構成されているリスナーは適用されません。

別の方法は、フォーカスがネイティブのビデオプレーヤーからブラウザーに戻ったときにリッスンすることですが、これをどのようにキャプチャするかはわかりません。

document.addEventListener('keydown', function (e) { console.log(e.keyCode); }, false);

上記は、ブラウザを使用している限りキーを押すと、コンソールに正常にログインします。HTML5ビデオがフルスクリーンモードに入るとすぐに、ブラウザは明らかにキーコードをコンソールに記録できなくなります。

私がやろうとしているのは、フルスクリーンモードを終了した後に1つのUIから別のUIに移行することです。

編集

Potenchの回答は出発点として役立ちました。そのため、次の警告にもかかわらず、私はそれをその回答として受け入れました。

  • Webkitブラウザでのみ機能します。:-)
  • 最初に定義されたように、イベントが発生video.webkitDisplayingFullscreenするtrueたびに機能するため、機能しません。resize

アニメーションフレームを利用して値の変化を常に監視することで、これをWebkitブラウザーでのみ機能させることができました。

var onFrame, isVideoFullscreen;

onFrame = window.requestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (fn) {
              setTimeout(fn, 1000 / 60);
          };

isVideoFullscreen = false;

function frame() {
    if (!isVideoFullscreen && video.webkitDisplayingFullscreen) {
        // entered fullscreen mode
        isVideoFullscreen = true;
    } else if (isVideoFullscreen && !video.webkitDisplayingFullscreen) {
        // exited fullscreen mode
        isVideoFullscreen = false;
    }
    onFrame(frame);
}
onFrame(frame);
4

1 に答える 1

1

わかりました。解決策があると思います...このコードを簡単に記述できるように、jQueryを使用していると仮定します。

フルスクリーンモードではキーボードイベントをキャプチャできるとは思いませんが、フルスクリーンモードを開始または終了したときに通知を受け取るには、これを行うことができます。

var isVideoFullscreen = video.webkitDisplayingFullscreen;

$(window).bind("resize", function (e) {
    // check to see if your browser has exited fullscreen
    if (isVideoFullscreen != video.webkitDisplayingFullscreen) { // video fullscreen mode has changed
       isVideoFullscreen =  video.webkitDisplayingFullscreen;

       if (isVideoFullscreen) {
            // you have just ENTERED full screen video
       } else {
            // you have just EXITED full screen video
       }
    }
});

これがあなたを正しい方向に導くか、導くことを願っています

于 2012-06-22T22:19:49.403 に答える