Fancybox - 视频自动关闭功能

Question

我正在使用 Fancybox Media。我想在视频播放完毕后关闭fancybox..

这是我的代码：

$('.fancybox-media').attr('rel', 'media-gallery').fancybox({ openEffect : '无', closeEffect : '无', prevEffect : '无', nextEffect : '无', 箭头：假， 填充：'0'， 边距：'0'， 宽度：'100%'， 高度：'100%'， 帮手：{ 媒体 ： { YouTube ： { 参数：{ 自动播放：1， 相对：0， 控制：0， 显示信息：0， 自动隐藏：1 } }}, 纽扣 ： {} } });

Answer 1

对于那些试图实现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 2

这是带有 Fancybox-Youtube-Cookie-Autoclose-Autopopup 的完整脚本，只需下载 css 中所需的图像，将它们放在根目录的 /fancybox 文件夹中并替换为您的视频 ID。确实有效，经过全面测试...

<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>

Answer 3

这是食谱：

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 回调将最后 2 个函数绑定到您的 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();
    }
}

请参阅 forked JSFIDDLE，它应该适用于 iOS 和桌面设备。

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