強火で進め

このブログではプログラム関連の記事を中心に書いてます。

JavaScriptで動画をフルスクリーン表示する方法

HTML5

参考記事はこちら。

Let Your Content Do the Talking: Fullscreen API - HTML5Rocks Updates
http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+html5rocks+(HTML5Rocks)

JavaScriptで動画をフルスクリーン表示は現在はChrome 15以降とFirefoxはNightlyビルドで動作します。

FirefoxのNightlyビルドの場合は加えて、以下の設定が必要です。

1. アドレスバーに about:config を入力。
2. フィルタの欄に full-screen-api.enabled を入力して絞り込む。
3. 値を true に変更。

フルスクリーン化は以下の様な記述になります。現在ではまだChromeとFirefoxで記述方法が異なるのでこの様な書き方になります。

  var v = document.getElementById("video");
  if (v.webkitRequestFullScreen) {
    v.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  } else if (v.mozRequestFullScreen) {
    v.mozRequestFullScreen();
  }

フルスクリーンの解除はブラウザ標準のショートカット(MacのChromeやFirefoxでは command+shift+f でも行えますが以下の様に記述しておけばenterキーでフルスクリーンの解除が出来ます。

document.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 13: // enterキーが押された時
      e.preventDefault();
      // フルスクリーンを解除
      if (document.webkitCancelFullScreen) {
      	document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
      	document.mozCancelFullScreen();
      }
      break;
  }
});

実際に試した場合は対応ブラウザでこちらにアクセスして下さい。

こちらのHTMLの内容は以下。

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>フルスクリーン(全画面表示)</title>
  <script>
document.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 13: // enterキーが押された時
      e.preventDefault();
      // フルスクリーンを解除
      if (document.webkitCancelFullScreen) {
      	document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
      	document.mozCancelFullScreen();
      }
      break;
  }
});

function movieFullscreen() {
  var v = document.getElementById("video");
  if (v.webkitRequestFullScreen) {
    v.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  } else if (v.mozRequestFullScreen) {
    v.mozRequestFullScreen();
  }
}
  </script>
</head>
<body>
<video id="video" controls="true">
  <source src='../video/playbackRate/video.ogv' type='video/ogg; codecs="theora, vorbis"' />
  <source src='../video/video.mov' type='video/quicktime' />
</video><br />
※音が出ます。<br />
※enterキーを押すとフルスクリーンを解除できます。<br />
<input type="button" onClick="movieFullscreen()" value="動画を全画面表示">
</body>
</html>