退出 HTML5 全屏视频会破坏 Android 上的海报图像

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 体验都是一致的。