Javascript 退出HTML5全屏视频会打断Android上的海报图像

Javascript 退出HTML5全屏视频会打断Android上的海报图像,javascript,android,html5-video,android-fullscreen,Javascript,Android,Html5 Video,Android Fullscreen,我有一个场景,其中我有包含视频内容的搜索结果。结果中的每个视频项目都有一个缩略图大小的视频播放器,因此每个结果集最多可以存在10个html 5视频播放器。当用户单击缩略图时,视频将全屏显示并自动播放视频。当用户全屏退出时,视频暂停 这一切在iOS设备上都非常有效,但在安卓系统上,我要担心的是更多的处理问题。这是我现在的逻辑: goFullScreen: function (ev) { var el = ev.target, i

我有一个场景,其中我有包含视频内容的搜索结果。结果中的每个视频项目都有一个缩略图大小的视频播放器,因此每个结果集最多可以存在10个html 5视频播放器。当用户单击缩略图时,视频将全屏显示并自动播放视频。当用户全屏退出时,视频暂停

这一切在iOS设备上都非常有效,但在安卓系统上,我要担心的是更多的处理问题。这是我现在的逻辑:

    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请求必须在其所在的范围内发生。由于移动设备上的安全限制,调出此范围将阻止其工作。我几乎用尽了所有的想法,所以我希望在这里能得到更多


如果您有任何建议,我将不胜感激。

我已放弃尝试解决Android中的所有bug和怪癖。相反,我只是直接从缩略图链接到mpeg4视频。所以没有更多的视频标签,没有更多的事件处理


唯一的副作用是,android的一些版本会显示一个关于如何播放视频的对话框,这并不理想,但比我能找到的任何替代方案都要好。幸运的是,无论我采取何种方式,iOS体验都是一致的。

Hi,is el.webkitEnterFullScreen;为你工作?如果有的话?那么你使用的是什么版本的Android?我面临着类似的问题,你能告诉我你是如何使用上述解决方案克服它的吗?任何信息都会有帮助