Question

我正在尝试将youtube iframe嵌入到我网站上的自定义灯箱中。嵌入本身工作正常。当我试图关闭灯箱时，灯箱会关闭，但视频（音频相反）会在后台播放。 stopVideo函数返回“stopVideo不是函数”

$("#youTubeLink").click(function(){
     var f = '<iframe id="ytplayer" type="text/html" width="100%" height="400px" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>'
     global.addLightboxContent(f);
     global.showLightbox();
});

当我关闭灯箱时，会发生这种情况

$("div#lightbox-close").click(function() {
    $('#ytplayer').stopVideo();
    global.killLightbox();
}

全局灯箱功能正在做他们应该做的事情（将iframe添加到LB中，显示然后将其删除）
单击div#lightbox-close时，将触发该功能。使用控制台日志进行测试

我猜我错过了某种Youtube js脚本包含。我不确定到底是什么。

Answer 1

// https://developers.google.com/youtube/iframe_api_reference

// global variable for the player
var player;

// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {

  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });

  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });

}

// 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);

请查看此示例http://codepen.io/marti1125/pen/XdyPOe

Answer 2

是的，因此您确实需要使用YouTube提供的javascript API加载iframe嵌入。然而，这可能不适用于您的灯箱，因为它似乎需要一个html字符串作为其内容。

或者，您可以随时删除关闭的youtube iframe - 这肯定会停止视频/音频。我怀疑将你的灯箱内容设置为一个空字符串（“”），甚至是一个空的div或iframe都可以做到这一点......

希望这有帮助！

Youtube iFrame嵌入stopVideo不是一个功能

2 个答案: