9

独自のコントロールを使用してカスタムビデオを再生します。ユーザーがフルスクリーンに入って存在するときにコントロールを変更するスクリプトがあります。問題は、ボタンの代わりにESCキーを使用して全画面表示を終了すると、コントロールへのスタイル変更が元に戻らないことです。ESCまたはボタンを使用してフルスクリーンを終了すると、同じ動作が発生することを確認する必要があります。

CSS：

function toggleFullScreen() {

  elem = document.getElementById("video_container");
  var db = document.getElementById("defaultBar"); 
  var ctrl = document.getElementById("controls");

  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {

          ctrl.style.width = '50%';
          ctrl.style.left = '25%';
          full.firstChild.src = ('images/icons/unfull.png');
          elem.requestFullscreen();          
        } else if (document.documentElement.mozRequestFullScreen) {
          full.firstChild.src = 'images/icons/unfull.png';
          ctrl.style.width = '50%';
          ctrl.style.left = '25%';
          elem.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {

          ctrl.style.width = '50%';
          ctrl.style.left = '25%';
          full.firstChild.src = 'images/icons/unfull.png';
          elem.webkitRequestFullscreen();

        }
  } else if (document.exitFullscreen) {
        full.firstChild.src = 'images/icons/full.png';
        ctrl.style.width = '100%';
        ctrl.style.left = '0';        
        document.exitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
        full.firstChild.src = 'images/icons/full.png';
        ctrl.style.width = '100%';
        ctrl.style.left = '0'; 
        document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {

        ctrl.style.width = '100%';
        ctrl.style.left = '0';
        full.firstChild.src = 'images/icons/full.png';
        document.webkitCancelFullScreen();
        } 
}
4

2 に答える 2

7

編集：この回答は古くなっています。最新のブラウザーの場合、@ Gibolt の回答の方が優れています。IE11 をサポートする必要がある場合は、従来の event.keyCode にフォールバックできます。詳細については、この記事を参照してください。

キープレスイベントをドキュメントに添付したいようです。このような何かがうまくいくはずです。

document.onkeypress = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert("Esc was pressed");
    }
};

詳細については、この記事をご覧ください

于 2013-02-17T19:36:42.237 に答える