ipad - video.js 视频在容器 div 隐藏 iPad 时被破坏

Question

该文档有许多 div，在任何时候只有一个是可见的（其他是 display:none）。

当一个可见的 div 被隐藏然后再次可见时，该 div 中的视频不再播放。

然而，这只是 iPad 上的一个问题。

关于如何重新初始化它们的任何建议？

谢谢

德里克

Answer 1

在以各种可能的方式搜索解决方案之后，似乎在 video.js 初始化后隐藏的容器中使用 video.js 的视频在再次可见时变得无法播放。

所以现在，当我的页面检测到浏览器在 iPad/iPhone 上时，他们使用本机视频播放器。

为此，我将 video.js 的包含内容放在页面头部的一个 javascript 块中，这样如果检测到 iPad 或 iPhone，它们就不会被加载。

 <script type="text/javascript">
if(!navigator.userAgent.match(/iPad/i) && !navigator.userAgent.match(/iPhone/i)) {
    document.write('<link href=\"\/\/vjs.zencdn.net/c/video-js.css\" rel=\"stylesheet\" type=\"text/css\" \/\>');
    document.write('<script src=\"\/\/vjs.zencdn.net/c/video.js\" type=\"text/javascript\"\>\<\/script\>');
}
</script>

Answer 2

我在 Firefox 上遇到了这个问题，但这是因为我在将其容器 div 移动到隐藏的 div 后试图停止视频。我删除了“停止”代码，播放器在 chrome、firefox 和 opera 上从一个 div 移动到另一个 div 后似乎重新启动？（并自行停止）。

在这个简单的解决方案之前，我认为只需通过 javascript 重新添加视频原始 html，它可能可以在 div 隐藏之后或显示之前完成。