在Android上退出HTML5全屏視頻會破壞海報圖像

Question

我遇到的情況是我的搜索結果包含視頻內容。 結果中的每個視頻項目都有一個縮略圖大小的視頻播放器，因此每個結果集最多可以存在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請求必須在它所在的范圍內發生。由於移動設備的安全性限制，調用該范圍將阻止其工作。 我已經用盡了所有想法，因此我希望在這里能多一些。

任何建議將不勝感激。

Answer 1

我已經放棄嘗試解決Android中的所有錯誤和怪癖。 相反，我只是直接從縮略圖鏈接到mpeg4視頻。 因此，沒有更多的視頻標簽，沒有更多的事件處理。

唯一的副作用是某些版本的android會顯示一個對話框，提示您如何播放視頻，這並不理想，但比我能找到的任何替代方法都要好。 幸運的是，無論我采用哪種方法，iOS體驗都是一致的。