Javascript 通过FancyBox的非聚焦窗口动态暂停YouTube视频

我已经知道如何动态播放/暂停YouTube视频，正如您从中看到的那样

然而，我很难让它使用onBlur与FancyBox动态工作（当窗口未聚焦时，视频应该暂停）

这是我的钢笔：

//显示Lightbox视频加载
$.fancybox.open({
youtube：{
控件：0，
showinfo:0
},
src:'//www.youtube.com/embed/-AszZcClVXA？enablejsapi=1'，//内容来源
类型：“iframe”，//内容类型：image | inline | ajax | iframe | html（可选）
});
//注入YouTube API脚本
var tag=document.createElement（'script'）；
tag.src=“//www.youtube.com/player_api”；
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onYouTubePlayerAPIReady（e）{
//从特定iframe（#视频）创建全局播放器
player=新的YT.player（$（“.fancybox iframe”）.attr（“id”）{
活动：{
//当玩家准备好使用时调用此函数
“onReady”：onPlayerReady
}
});
}
函数onPlayerReady（）{
addEventListener（“blur”，function（））{
player.pauseVideo（）；
});
}

---

您只是在模糊上暂停视频。为什么不使用mouseover事件播放视频，使用mouseout事件暂停视频？

这里是一个演示-

基本上，这个想法是在YouTube API可用后初始化fancyBox，然后可以在fancyBox回调中使用YouTube API方法

// 1. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 2. This function initializes fancyBox
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {

  $('[data-fancybox="group"]').fancybox({
    onComplete : function( instance, current ) {

      if ( current.type === 'iframe' ) {
        var id = current.$content.find('iframe').attr('id');

        player = new YT.Player( id, {
          events : {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
    }

  });

}

// 3. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

// 4. Fires when the player's state changes.
function onPlayerStateChange(event) {
    // Go to the next video after the current one is finished playing
    if (event.data === 0) {
        $.fancybox.getInstance('next');
    }
}

// Page Visibility API to pause video when window is not active
$(document).on("visibilitychange", function() {
  if ( player ) {
    if ( document.hidden ) {
      player.pauseVideo();
    } else {
      player.playVideo();
    }
  }
});

---

因为这是为Android应用程序做的，当手机被锁定时，视频会播放，这违反了谷歌的政策。我试着使用

document.addEventListener（“暂停”）

，但也不起作用。问题是如何让它与FancyBox一起动态工作。这只适用于移动设备吗？就像我说的，问题是如何让它与FancyBox一起动态工作。我在这里使用window.onblur，这样在桌面上解析会更快。如果我/我们能够找到如何使用onblur和FancyBox让它暂停，那么我就能够使用暂停事件侦听器让它在PhoneGap中工作