Fancybox – video自动关闭function

我正在使用Fancybox Media。 我想在video完成时，关闭fancybox ..

这是我的代码：

 $（'。fancybox-media'）。attr（'rel'，'media-gallery'）。fancybox（{
     openEffect：'none'，
     closeEffect：'无'，
     prevEffect：'无'，
     nextEffect：'无'，
    箭头：假的，
    填充：'0'，
    保证金：'0'，
    宽度：'100％'，
    身高：'100％'，
    助手：{
        媒体：{
             youtube：{
                参数：{
                    自动播放：1，
                     rel：0，
                    控制：0，
                     showinfo：0，
                    自动隐藏：1
                 }
             }}，
        纽扣 ： {}
     }
 }）;

Answer 1

这是配方：

1）。 将youtube的播放器API加载到您的页面中。

2）。 创建3个function：

• 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的播放器更改，包括video结束。 这里我们称之为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设备中播放的video转换为HTML5格式。 不知何故，函数内部的autoplay选项

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

…不允许youtube正确转换video，它只是挂起。

替代解决方案是检测移动设备并仅执行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和桌面设备的分叉JSFIDDLE 。

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

Answer 2

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