iPadで、フルスクリーンで表示されているビデオの中断時にページ遷移をしたい

Question

動画を使ったブラウザアプリを作成しています。
iPad限定で使用するアプリで、動画解説ページの動画を再生するボタンをおした時に、display:none;で隠しておいたビデオをFullScreen APIを使って全画面表示をしてビデオを再生しています。

// 普段はビデオ要素を非表示にしておく
video {
  display: none;
}

var video = document.getElementsByTagName("video")[0];
video.webkitEnterFullScreen(); // フルスクリーン状態にして、
video.play(); // 再生

ここからが本題です。
ビデオの再生が完了したときに、下記の条件で別ページに遷移したいと思っています。

• ビデオが最後まで再生され、自動的にフルスクリーンが解除された時・・・完了ページに移動する
• ビデオを途中で中断してユーザーがフルスクリーンを解除した時・・・中断ページに移動する

これを実現しようと思い、videoのイベントを使って下記の様に設定してみました。

var video = document.getElementsByTagName("video")[0];
video.webkitEnterFullScreen(); // フルスクリーン状態にして、
video.play(); // 再生
video.addEventListener("ended", function (evt) {
  // ビデオの再生が完了した時に別のページに移動する
});

しかし、この書き方だと、動画が完全に再生されたあとしか発火せず、動画を途中で中断してフルスクリーン状態が解除された時には発火しないのです。

videoのイベントに動画を途中で中断したなんていうものは存在しないので、Full Screen APIのイベントであるfullscreenchangeイベントを使えばうまく設定できるかも、と思って下記のように書いてみました。

var video = document.getElementsByTagName("video")[0];
var video_state = "";

video.addEventListener("ended", function (evt) {
  video_state = "ended";
});

video.addEventListener("fullscreenchange", function (evt) {
  if (!evt.currentTarget.fullscreenEnabled && video_state == "") {
    // フルスクリーンが解除された時に、video_stateが空なら中断されたとみなして、
    //中断メッセージの書かれたページに移動
  } else if ( !evt.currentTarget.fullscreenEnabled $$ video_state == "ended" ) {
    // フルスクリーンが解除された時に、video_stateがendedなら、再生が完了しているとみなして、
    // 完了メッセージがかかれたページに移動
  }
});

video.webkitEnterFullScreen(); // フルスクリーン状態にして、
video.play(); // 再生

しかし、残念ながらfullscreenchangeイベントが発火せず行き詰ってしまいました。
webkitFullScreenと書いているように、まだベンダープレフィックスを付けないと行けないと思ってwebkitを付けてみて試してみましたが（webkitfullscreenchange,webkitFullScreenChange）それでもうまく行きませんでした。

色々と調べていると、Full Screen API自体がiOSに対応していないなんてことも書かれていたんですが、webkitFullScreenは動作するしで、よくわからん状態です><

確認環境は、MacのSimulatorを使ってiOS9.2で確認しています。

どなたかよい方法をご存知の方、ご教授願います。

追記1:

MacのChromeではwebkitfullscreenchangeでうまくイベントが発火しました。。

Answer 1

kei344さんから頂いた回答をヒントにして下記のような形で解決できました。

      // ビデオが最後まで再生された時
      video.addEventListener("ended", function (evt) {
        //ビデオが完全に終了した場合は、フルスクリーンを解除
        this.webkitExitFullScreen();
        console.log("ended");
        // 完了ページへの遷移を実行 ..
      });

      // ビデオが停止された時
      video.addEventListener('pause', function (evt) {
        // ビデオを停止時のスクリーンの状態を確認
        checkPausedState(this);
      });

      function checkPausedState (video) {

        setTimeout(function () {
          // videoのフルスクリーンモードを確認
          if (video.webkitDisplayingFullscreen) {
            // 動画が停止中か確認し、停止中なら再帰的に処理を実行
            if (video.paused) {
              console.log("full screen mode means still pausing..");
              checkPausedState(video);
            }
          } else {
            // フルスクリーンモードから抜けている場合はここを実行
            console.log("video playing canceled");
            // 中断ページへの遷移を実行 ..
          }
        }, 100);

      }

動画を中断する方法が、「"閉じる"ボタンを押して停止+フルスクリーン解除」と「"停止"を押したあとに"閉じる"を押してフルスクリーン解除」の2つがあって、pauseイベント発火時に必ずしもフルスクリーンが解除されている訳ではなかったので、setTimeout()で状態確認をして対応しました。

また、色々と調べていると、どうもiOS独自(?)のHTMLVideoElementなるものが存在するようで、webkitEnterFullScreen()やwebkitDisplayFullscreenはそのAPIが提供する機能です。
なので他デバイスでの実装にはAPIの実装状況をみて処理の切り替えが必要になりますが、今回はiPadのみ対象としていますので今回の実装はここまでにしときます。

Answer 2

手元に環境が無いため、できるかは試せていませんが、いくつか回答してみます。

---

1. document.addEventListener( 'click', function(){} ) でタップ自体を取得し、そのとき再生中で無ければ中断している

イベントの伝播がビデオでも問題なくいけるのであれば可能。
0. ビデオの pause error abort などのイベントを監視する
止まった状態でフルスクリーンかどうかを判別する。
0. フルスクリーンが始まった時点で、背後で中断ページを読み込んでおく
フルスクリーンを解除したら実質ページ移動したことと同じ意味合いになります。

---

何かのお役に立てればいいのですが･･･。

【html5 video 使う 再生中かどうかの判定 | 徳島のホームページ制作屋】
http://ziyudom.com/post-717/

【video要素、audio要素をJavaScriptから操作する－HTML5のAPI、および、関連仕様】
http://www.htmq.com/video/

Comments

[JunzoMatunoo]

ありがとうございます！
ご回答いただいた3つですが、

1. → 再生中の動画の上でクリック（タップ）してみましたが、イベント伝播起こりませんでした。
3. → このアプリですが、View側でriot.jsを使用していて（ソースコードはわかりやすくするため、その部分のコードは省いていました）、riot.routerによってhushChangeを監視している状態です。そのため、Viewを切り替えると、video要素も画面上からなくなってしまうのでこの方法は利用できませんでした。

総合的に考えると、2の解決方法が良さそうな気がしましたので、その方向で考えてみます！