Question

我已经知道如何动态播放/暂停YouTube视频，如my weave所示。

然而，我很难使用onBlur使用FancyBox动态工作（当窗口没有聚焦时，视频应暂停）。

这是我的笔：http://codepen.io/anon/pen/wJXoJy?editors=0010

// Show Lightbox Video Onload
$.fancybox.open({
  youtube : {
    controls : 0,
    showinfo : 0
  },
  src  : '//www.youtube.com/embed/-AszZcClVXA?enablejsapi=1', // Source of the content
  type : 'iframe', // Content type: image|inline|ajax|iframe|html (optional)
});

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubePlayerAPIReady(e) {
  // create the global player from the specific iframe (#video)
  player = new YT.Player($(".fancybox-iframe").attr("id"), {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady() {
  window.addEventListener("blur", function() {
    player.pauseVideo();
  });
}

<link rel="stylesheet" href="//www.fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.css?v=1490320405" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.js?v=1490320405"></script>

Answer 1

这是一个演示 - http://codepen.io/fancyapps/pen/jBKowp?editors=1010

基本上，想法是在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();
    }
  }
});

Answer 2

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

通过FancyBox中的非焦点窗口动态暂停YouTube视频

2 个答案: