【问题标题】:Fancybox YouTube not working on iPad or iPhoneFancybox YouTube 无法在 iPad 或 iPhone 上运行
【发布时间】:2014-03-12 11:58:56
【问题描述】:

我注意到官方的 Fancybox youtube 实现 JSfiddle 在 iO 上不起作用,有什么想法吗?

http://jsfiddle.net/M78zz

http://jsfiddle.net/M78zz/show/

// Fires whenever a player has finished loading
function onPlayerReady(event) {
    event.target.playVideo();
}

// Fires when the player's state changes.
function onPlayerStateChange(event) {
    // Go to the next video after the current one is finished playing
    if (event.data === 0) {
        $.fancybox.next();
    }
}

// The API will call this function when the page has finished downloading the JavaScript for the player API
function onYouTubePlayerAPIReady() {

    // Initialise the fancyBox after the DOM is loaded
    $(document).ready(function() {
        $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                nextEffect  : 'none',
                prevEffect  : 'none',
                padding     : 0,
                margin      : 50,
                beforeShow  : function() {
                    // Find the iframe ID
                    var id = $.fancybox.inner.find('iframe').attr('id');

                    // Create video player object and add event listeners
                    var player = new YT.Player(id, {
                        events: {
                            'onReady': onPlayerReady,
                            'onStateChange': onPlayerStateChange
                        }
                    });
                }
            });
    });

}

fancybox 打开,youtube 视频加载,然后看起来要开始播放了,然后我就黑屏了。这在 iPhone 和 iPad 上都会发生。

谁能帮忙?

【问题讨论】:

标签: jquery youtube fancybox youtube-api fancybox-2


【解决方案1】:

这个问题似乎出现了很多,很可能您的问题是由于在 Mobile Safari 中禁止 javascript 自动播放或以编程方式开始播放标签中的任何内容(因为有没有闪光灯,YouTube 将如何在那里提供视频)。相反,Mobile Safari 要求用户必须启动播放(大概是这样用户才不会在无意中用完蜂窝数据)。

因此,如果fancybox 依赖于程序化播放(即event.target.playVideo()),它与Mobile Safari 不兼容。

More info

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-04-05
    • 2023-03-20
    • 1970-01-01
    • 2013-10-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多