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

【问题标题】：video.js videos are destroyed when container div hidden iPadvideo.js 视频在容器 div 隐藏 iPad 时被破坏
【发布时间】：2013-03-16 17:02:24
【问题描述】：

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

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

但这只是 iPad 上的问题。

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

谢谢

德里克

【问题讨论】：

可以看到：gordon/surveys/AKGW-YHSN/D3QY48N9 - 点击 Next/Previous 按钮显示/隐藏包含视频的 div。
对不起，链接有问题，但问题仍然存在

标签： ipad html5-video video.js

【解决方案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>

【讨论】：

感谢您的解决方案，它显示了 videojs 的设计非常糟糕，videojs 的主要思想是不必处理所有这些废话。

【解决方案2】：

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

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

【讨论】：