ios - video.js 在 iPad 上破坏 popcorn.js

Question

所以这就是挑战。制作一个可点击的爆米花链接覆盖视频。在桌面上很简单，但事实证明 iOS 是一个挑战。如果视频元素具有 controls 属性，iOS 会劫持视频窗口内的所有点击，使链接覆盖不可点击。然而，如果 controls 属性没有出现在视频元素上，爆米花链接是可点击的并且效果很好。

问题是，现在没有视频控件。我需要那些。所以我认为一些手写的基于 javascript 的视频控件应该可以正常工作。视频标签上没有 controls 属性，因此爆米花叠加层是可点击的，还有可用的控件!我对此的尝试是使用 video.js。

所以现在我有 video.js 视频控件和爆米花在桌面上和谐相处。但在 iPad 上，video.js 部分有效，但爆米花部分不再有效。我得到了 video.js 控件，但没有触发爆米花事件。但是没有错误，脚本完全执行。

有人知道这里发生了什么吗？为什么 video.js 只在 iOS 上停止爆米花？有解决办法吗？

PROBLEM DEMO

Answer 1

VideoJS 必须对您的网页进行更改以插入其所有控件并使它们正确定位，这包括四处移动视频元素。 Mobile Safari 是出了名的敏感，而且对这些东西有点奇怪。看起来 VideoJS 正在删除您的原始视频元素并用一个新元素替换它，这发生在 Popcorn 将其自身附加到原始视频元素之后。

Debugging Mobile Safari 上的缩小 Javascript 不是野餐，所以我不能确切地说出为什么 VideoJS 在 iPad 而不是其他浏览器上这样做。但是使用控制台，可以大致了解发生了什么:

document.getElementsByTagName('video')[0] ===
    window.Popcorn.instances[0].media
//false!

这意味着 Popcorn 正在收听的视频元素与您在网页中看到和播放的视频元素不同。从这个命令...

window.Popcorn.instances[0].media.parentNode //null!

...您可以看到原始标记存在于内存中但未附加到 DOM。因此，当新视频继续播放时，原始视频会在 0:00 暂停。

解决方案是在 VideoJS 完成其业务后设置您的 Popcorn 实例。然后确保正确引用视频元素，因为现在“#popacorn”引用了 <div> ，新的视频元素称为“popacorn_html5_api”。这应该涵盖 iOS 和桌面浏览器。