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

在Android上退出HTML5全屏视频中断海报图像

1 个答案: