1

ビデオ コンテンツを含む検索結果があるシナリオがあります。結果の各ビデオ アイテムにはサムネイル サイズのビデオ プレーヤーがあるため、結果セットごとに最大 10 個の html 5 ビデオ プレーヤーが存在できます。ユーザーがサムネイルをクリックすると、ビデオがフルスクリーンになり、ビデオが自動的に再生されます。ユーザーが全画面表示を終了すると、ビデオは一時停止します。

これはすべて iOS デバイスでは問題なく機能しますが、Android では、心配する必要のある処理がはるかに多くなります。私が今持っているロジックは次のとおりです。

    goFullScreen: function (ev) {
      var el                = ev.target,
          isVideoFullscreen = el.webkitDisplayingFullscreen;

      el.webkitEnterFullScreen();
      // the approach below is the only way I could get reliable fullscreen detection on android
      $(window).bind("resize", function (e) {
        if (isVideoFullscreen != el.webkitDisplayingFullscreen) {
          isVideoFullscreen = el.webkitDisplayingFullscreen;

          if (isVideoFullscreen) {
            el.load();
            el.play();
          } else {
            el.pause();
          }
        }
      });
    }

iOS では、これらすべてを均等に処理する必要はありませんが、問題なく動作します。Androidの問題は、フルスクリーンを終了するとビデオが一時停止することですが、一時停止したビデオのポスター画像がビデオの静止画に置き換えられますが（予想される）、結果セット内の後続のすべてのビデオにはポスターがあります画像が醜いビデオ アイコンに置き換えられました。その結果、サムネイルは壊れたビデオのように見えます。ただし、それらをタップすると、フルスクリーンになり、問題なく再生されます。

Galaxy Nexus と Galaxy SII でテストしています。el.pause() は責任を負わないと言えます。削除すると、動画はサムネイルで引き続き再生され、その下のすべての動画タグには壊れたポスター アイコンが表示されたままになります。

これは、デスクトップ Webkit ブラウザーと iOS デバイスで期待どおりに機能します。この問題は、Android 4 以降のデバイスでのみ発生します。また、EnterFullscreen リクエストは、それが含まれるスコープ内で発生する必要があることにも注意してください。このスコープ外で呼び出すと、モバイル デバイスのセキュリティ制限により機能しなくなります。私はすべてのアイデアをほとんど使い果たしたので、うまくいけばさらにいくつかのアイデアを得るためにここを探しています.

どんな提案でも大歓迎です。

4

1 に答える 1