Javascript 退出HTML5全屏视频会打断Android上的海报图像
我有一个场景,其中我有包含视频内容的搜索结果。结果中的每个视频项目都有一个缩略图大小的视频播放器,因此每个结果集最多可以存在10个html 5视频播放器。当用户单击缩略图时,视频将全屏显示并自动播放视频。当用户全屏退出时,视频暂停 这一切在iOS设备上都非常有效,但在安卓系统上,我要担心的是更多的处理问题。这是我现在的逻辑: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
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?我面临着类似的问题,你能告诉我你是如何使用上述解决方案克服它的吗?任何信息都会有帮助