Fancybox-视频自动关闭功能

Question

我使用的是Fancybox Media。我想在视频完成后，关闭fancybox。。

这是我的代码：

$('.fancybox media').attr('rl'，'media gallery').fancybox({openEffect:"none"，closeEffect:"none"，prevEffect:"无"，nextEffect:"无"，箭头：false，填充："0"，边距："0"，宽度："100%"，高度："100%"，助手：{媒体：{youtube：{参数：{自动播放：1，rel:0，控件：0，showinfo:0，自动隐藏：1}}}，按钮：｛｝}})

Answer 1

这是配方：

1) 。将youtube的播放器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关闭方法：

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

3)。现在使用fancyboxbeforeShow回调将最后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日)：

@fightstar20说：

这种方法似乎在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();
}
}

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

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

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自动关闭自动弹出的完整脚本。只需下载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>