スマートフォンでvideoタグの動画をフルスクリーンにして再生する

iPhoneとかiPod touchだと、videoタグはフルスクリーンにして表示してくれるのだけど、Android系の一部端末とかだと、フルスクリーンにしてくれたり、してくれなかったりする。

してくれない場合はvideoタグに対してフルスクリーンAPIを使うと良いみたい。

<video onclick="this.play()">
  <source>
    ...
  </source>
</video>

this.play()を書いているのはAndroid系の一部の端末でタップしても動画を再生してくれないので、それの対策。

$('video').on('click', function(event) {
  (!!this.webkitEnterFullscreen) && this.webkitEnterFullscreen();
});

これでクリックしたときにフルスクリーンになる。webkitEnterFullscreenを持っていれば。

フルスクリーン API の利用を見るとrequestFullScreenを呼ぶように書いてあるので、以下のように書き換えた方が良いのかも。

$('video').on('click', function(event) {
  if (!!this.requestFullScreen) {
    this.requestFullScreen();
  } else if (!!this.webkitRequestFullScreen) {
    this.webkitRequestFullScreen();
  } else if (!!this.webkitEnterFullscreen) {
    this.webkitEnterFullscreen();
  }
});

フルスクリーンから普通の状態に戻したときに一時停止する場合はfullscreenchangeやwebkitfullscreenchangeイベントにコードを追加する。

$('video').on('fullscreenchange webkitfullscreenchange', function(event) {
  var isFullScreen = true;

  if (typeof document.fullscreenEnabled !== 'undefined') {
    isFullScreen = document.fullscreenEnabled;
  } else if (typeof document.webkitIsFullScreen !== 'undefined') {
    isFullScreen = document.webkitIsFullScreen;
  }

  (!isFullScreen) && this.pause();
});

---

……などと書いたのだけど、数ヶ月前に書いたコードなので合っているのか覚えてない。

あとCan I use Full Screen API?を見るとAndroid BrowserもFullscreenAPIぜんぜん対応してないみたいなんだけど、なんで動作したんだろう。Chromeで確認したのかな。ちゃんと動作していたのは覚えてるのだけど……