Fancybox-视频自动关闭功能 [英] Fancybox - Video auto close function

问题描述

我正在使用Fancybox Media.我要在视频播放完成后关闭fancybox.

i'm using a Fancybox Media. I want to when the video complete, close the fancybox..

这是我的代码:

$('.fancybox-media').attr('rel', 'media-gallery').fancybox({
    openEffect : 'none',
    closeEffect : 'none',
    prevEffect : 'none',
    nextEffect : 'none',
    arrows : false,
    padding : '0',
    margin: '0',
    width: '100%',
    height: '100%',
    helpers : {
        media : {
            youtube : {
                params : {
                    autoplay : 1,
                    rel : 0,
                    controls : 0,
                    showinfo : 0,
                    autohide : 1
                }
            }},
        buttons : {}
    }
});

推荐答案

这里是食谱:

1).将 youtube的播放器API 加载到您的页面中.

1). Load the youtube's player API into your page.

2).创建3个功能:

2). Create 3 functions :

• onYouTubePlayerAPIReady-监听youtube的API:

• onYouTubePlayerAPIReady - listens for youtube's API :

function onYouTubePlayerAPIReady() { .. }

然后将您的fancybox初始化代码(包括.ready()方法)放在此函数中，例如:

then place your fancybox initialization code (including the .ready() method) inside this function like :

function onYouTubePlayerAPIReady() {
    $(document).ready(function () {
        $('.fancybox-media').attr('rel', 'media-gallery').fancybox({
            // fancybox API options
            ... etc.
        }); // fancybox
    }); // ready
}

onPlayerReady-收听youtube的播放器:

onPlayerReady - listens for youtube's player :

function onPlayerReady(event) {
    event.target.playVideo();
}

onPlayerStateChange-收听youtube播放器的更改，包括视频结尾.这里我们称fancybox close方法:

onPlayerStateChange - listens for youtube's player changes, including the video end. Here we call the fancybox close method :

function onPlayerStateChange(event) {
    if (event.data === 0) {
        $.fancybox.close();
    }
}

3).现在，使用fancybox beforeShow回调将后两个功能绑定到您的fancybox(youtube)内容，例如:

3). Now use the fancybox beforeShow callback to bind the last 2 functions to your fancybox (youtube) content like :

beforeShow: function () {
    var id = $.fancybox.inner.find('iframe').attr('id');
    var player = new YT.Player(id, {
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
}

请参见 JSFIDDLE

See JSFIDDLE

编辑(2014年2月3日):

EDIT (Feb 3rd. 2014):

@ fightstarr20 说:

这种方法似乎无法在iPhone或iPad上运行，知道为什么吗?

This method doesn't appear to work on iPhone or iPad, any idea why?

似乎youtube将iOS设备中播放的视频转换为HTML5格式.不知何故，函数

It seems like youtube converts videos played in iOS devices into HTML5 format. Somehow, the autoplay option inside the function

function onPlayerReady(event) {
    event.target.playVideo();
}

...不允许youtube正确转换视频，而只是挂起.

... doesn't let youtube to convert the video properly and it just hangs.

另一种解决方案是检测移动设备，仅对桌面代理执行event.target.playVideo();，因此您可以执行此操作

The alternative solution is to detect mobile devices and only perform event.target.playVideo(); for desktop agents so, you could do this

// detect mobile devices features
var isTouchSupported = 'ontouchstart' in window,
    isTouchSupportedIE10 = navigator.userAgent.match(/Touch/i) != null;

function onPlayerReady(event) {
    if (!(isTouchSupported || isTouchSupportedIE10)) {
        // this is NOT a mobile device so autoplay     
         event.target.playVideo();
    }
}

请参见 分叉的JSFIDDLE ，该版本应适用于iOS和台式机设备.

See forked JSFIDDLE that should work for iOS and desktop devices alike.

注意:您可以添加首选的设备检测方法.到目前为止，我发现我的方法简单可靠.

NOTE: you could add your preferred device detection method. I found mine simple and reliable so far.

这篇关于Fancybox-视频自动关闭功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！