カスタムコントロール付きHTML5動画プレーヤー：[ESC]を使用して全画面を終了

Question

カスタムコントロールでHTML5動画プレーヤーを作成しています。あなたはTHIS jsFiddleでそれを見ることができます。

HTMLは「古典的」である：フルスクリーンボタンをクリックしてEscキーキーを押す：

<div class="video-container"> 
    <video poster="http://code-love.me/video/posters/flamenco.jpg"> 
     <source src="http://code-love.me/video/videos/flamenco.mp4" type="video/mp4" /> 
     <source src="http://code-love.me/video/videos/flamenco.ogg" type="video/ogg" /> 
    </video> 
    <div class="controls-wrapper"> 
     <div class="progress-bar"> 
      <div class="progress"></div> 
     </div> 
     <ul class="video-controls"> 
      <li><input type="button" name="play-pause" value="Play" class="play"></li> 
      <li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li> 
     </ul> 
    </div> 
</div> 

は私が2つのイベント時に呼び出して、フルスクリーン機能を持っています。

フルスクリーンボタンをクリックすると全画面モードに切り替わりますが、キーを使用しない理由はわかりません。結局のところ、それは同じ機能です....

すべてのヒント？タイ！

Answer 1

私はあなたの目標を理解したので、セキュリティリスクのためにフルスクリーンモードでキー入力イベントを聴くことはできません。これをChromeで有効にする方法がありますが、そのことを強く推奨します。

あなたができることは、webkitfullscreenchange mozfullscreenchange fullscreenchangeイベント（ブラウザの互換性の理由から複数のイベント）を聞くことができることです。

これらのイベントが発生したときに動作します。

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) { 
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; 
    var event = state ? 'FullscreenOn' : 'FullscreenOff'; 

    // Now do something interesting 
    if(event === 'FullscreenOff') { 
    // Do something when user exists fullscreen 
    } else { 
    // Do something when user enters fullscreen 
    } 
});