0

所以这是挑战。制作一个可点击的爆米花链接覆盖视频。在桌面上很简单，但 iOS 被证明是一个挑战。如果 video 元素具有controlsiOS 劫持视频窗口内所有点击的属性，则使链接覆盖不可点击。但是，如果controls视频元素上不存在该属性，则爆米花链接是可点击的并且运行良好。

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

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

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

问题演示

4

2 回答 2

3

我在 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 使一个 div id = "videoid" 包含一个视频 id = "videoid_html5_api"，因此对象 id="videoid" 不再是一个视频对象。

于 2013-02-11T16:40:54.330 回答
3

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

在 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' 引用 a <div>，并且新的视频元素称为“popacorn_html5_api”。这应该涵盖您的 iOS 和桌面浏览器。

于 2013-01-26T22:29:46.443 回答