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

问题描述

我使用的是 Fancybox 媒体.我想在视频完成后关闭fancybox..

这是我的代码:

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

解决方案

这是食谱:

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

2).创建 3 个函数:

• onYouTubePlayerAPIReady - 监听 youtube 的 API :

  函数 onYouTubePlayerAPIReady() { .. }

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

  函数 onYouTubePlayerAPIReady() {$(document).ready(function () {$('.fancybox-media').attr('rel', 'media-gallery').fancybox({//花式盒 API 选项... 等等.});//花式盒子});//准备好}

• onPlayerReady - 监听 youtube 的播放器:

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

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

  function onPlayerStateChange(event) {如果(事件数据=== 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, {事件:{onReady: onPlayerReady,onStateChange: onPlayerStateChange}});}

参见 JSFIDDLE

<小时>

编辑(2014 年 2 月 3 日):

@fightstarr20 说:

此方法似乎不适用于 iPhone 或 iPad，您知道为什么吗?

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

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

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

另一种解决方案是检测移动设备并且只为桌面代理执行 event.target.playVideo(); 所以，你可以这样做

//检测移动设备功能var isTouchSupported = 'ontouchstart' 在窗口中，isTouchSupportedIE10 = navigator.userAgent.match(/Touch/i) != null;函数 onPlayerReady(事件){if (!(isTouchSupported || isTouchSupportedIE10)) {//这不是移动设备所以自动播放event.target.playVideo();}}

参见 分叉的 JSFIDDLE，它应该适用于 iOS 和桌面设备.

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

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

Here is my code:

$('.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 : {}
    }
});

解决方案

Here it's the recipe :

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

2). Create 3 functions :

• onYouTubePlayerAPIReady - listens for youtube's API :

  function onYouTubePlayerAPIReady() { .. }
  

  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 - listens for youtube's player :

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

• 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). 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
        }
    });
}

See JSFIDDLE

---

EDIT (Feb 3rd. 2014):

@fightstarr20 said :

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

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

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

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

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