Question

我正在使用Fancybox Media。我希望当视频完成时，关闭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 : {}
    }
});

Answer 1

这是食谱：

1）。将 youtube's player API 加载到您的页面中。

2）。创建3个功能：

onYouTubePlayerAPIReady - 倾听youtube的API：

function onYouTubePlayerAPIReady() { .. }

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

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

onPlayerReady - 倾听youtube的播放器：

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

onPlayerStateChange - 倾听youtube的播放器更改，包括视频结束。这里我们称之为fancybox close方法：
```
function onPlayerStateChange(event) {
    if (event.data === 0) {
        $.fancybox.close();
    }
}
```

3）。现在使用fancybox beforeShow回调将最后两个函数绑定到您的fancybox（youtube）内容，如：

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

参见 JSFIDDLE

编辑（2014年2月3日）：

@fightstarr20说：

此方法似乎无法在iPhone或iPad上运行，任何想法为什么？

似乎youtube将iOS设备中播放的视频转换为HTML5格式。不知何故，函数内的自动播放选项

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

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

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

// 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();
    }
}

请参阅适用于iOS和桌面设备的 forked JSFIDDLE 。

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

Answer 2

针对那些尝试使用fancybox 3.3.5版的人

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

Answer 3

这是Fancybox-Youtube-Cookie-Autoclose-Autopopup的完整脚本，只需将css中所需的图像下载到根目录中的/ fancybox文件夹中，然后替换为您的视频ID。真的经过全面测试......

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
 <script type="text/javascript"> 
// 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();
    }
}
function onPlayerStateChange(event) {
    if (event.data === 0) {
        $.fancybox.close();
    }
}
function onYouTubePlayerAPIReady() {
$(function() {
    if ($.cookie('welcome_video')) {
        // it hasn't been three days yet
    } else {
        // set cookie to expire in 3 days
        $.cookie('welcome_video', 'true', { expires: 3});
    $(document).ready(function () {
        $.fancybox.open({
		href: "https://www.youtube.com/embed/qm1RjPM9E-g", /*YOUR VIDEO ID*/
            helpers: {
                media: {
                    youtube: {
                        params: {
                            autoplay: 1,
                            rel: 0,
                            // controls: 0,
                            showinfo: 0,
                            autohide: 1,
                        }
                    }
                },
                buttons: {}
            },
            beforeShow: function () {
                var id = $.fancybox.inner.find('iframe').attr('id');
                var player = new YT.Player(id, {
                    events: {
                        onReady: onPlayerReady,
                        onStateChange: onPlayerStateChange
                    }
                });
            }
        }); // fancybox	
    }); // ready
   } // cookie else ready
}); // function for cookie
} // youtube API ready
</script>

＆＃13;

Fancybox - 视频自动关闭功能

3 个答案: