javascript - 退出 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 的问题是，当我退出全屏时，视频会暂停，但海报图像会被我刚刚暂停的视频替换为视频中的静止图像(这是预期的)，但结果集中的所有后续视频都有其海报图像被替换为丑陋的视频图标。结果，缩略图看起来就像 splinter 的视频。但如果你点击它们，它们仍然会全屏显示并且播放得很好。

我正在 Galaxy Nexus 和 Galaxy SII 上进行测试。我可以说 el.pause() 不负责，如果删除，视频将继续在缩略图中播放，并且其下面的所有视频标签仍将具有损坏的海报图标。

这在桌面 webkit 浏览器和 iOS 设备上按预期工作。仅在 Android 4+ 设备上遇到此问题。另请记住，EnterFullscreen 请求必须在其所在范围内发生。由于移动设备上的安全限制，超出此范围的调用将阻止其工作。我几乎已经用尽了所有的想法，所以我在这里寻找希望能得到更多的想法。

如有任何建议，我们将不胜感激。

Answer 1

我已经放弃尝试解决 Android 中的所有错误和怪癖。相反，我只是直接从缩略图链接到 mpeg4 视频。因此不再需要视频标签，不再需要事件处理。

唯一的副作用是，某些版本的 Android 会显示一个对话框，告诉您如何播放视频，这并不理想，但比我能找到的任何替代方案都要好。幸运的是，无论我采取什么方法，iOS 体验都是一致的。