Question

所以这就是挑战。制作一个可点击的爆米花链接覆盖视频。在桌面上足够简单，但iOS被证明是一个挑战。如果视频元素具有controls属性，则iOS会劫持视频窗口中的所有点击次数，从而使链接覆盖不可点击。但是，如果视频元素上没有controls属性，则爆米花链接可以点击并且运行良好。

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

所以现在我在桌面上安装了video.js视频控件和爆米花。但在iPad上，video.js部分可以正常工作，但爆米花部分已不复存在了。我得到了video.js控件，但没有爆炸事件发生。但是没有错误，脚本完全执行。

有谁知道这里发生了什么？为什么video.js只会在iOS上停止爆米花？有解决方案吗？

PROBLEM DEMO

Answer 1

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

Debugging缩小手机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和桌面浏览器。

Answer 2

我在Firefox中遇到了同样的问题。爆米花没有使用videoJS。

我解决了这个问题：

jQuery(function(){

    _V_('videoid').ready(function() { // videoJS ready ?
        console.info('videoJS ready : player ID = '+$(this).attr('id'));
        console.info('videoJS ready : videoObj ID = '+$('#videoid video').attr('id'));

        var pop = Popcorn( "#"+$('#videoid video').attr('id') );
        // etc...

    });

});

与所说的brianchirls一样，videoJS制作一个包含视频ID =“videoid_html5_api”的div id =“videoid”，因此对象id =“videoid”不再是视频对象。

video.js在iPad上打破了popcorn.js

2 个答案: