jquery - jQuery AJAX加载和Youtube API iframe

Question

我正在网页上。我正在使用jQuery加载(AJAX)函数将新内容动态加载到内容div中。在每个这些内容div中都有一个图像。当您点击该图像时，应开始播放YouTube嵌入式视频(iframe)。到目前为止，一切正常，但是有一件事，这有点奇怪:

每当我开始播放YouTube视频时，缓冲就会开始。如果我现在想在缓冲时将新内容加载到content div中，则在完成缓冲后会触发jQuery加载功能。因此有时由于内容正在缓冲，我将不得不等待大约10秒钟才能更改内容(简单的HTML内容)。如果我没有使用嵌入的iframe，但是嵌入的对象一切正常，但是我也想支持移动设备(iOS)。因此，一个简单的示例向您展示:

$(".content").load(NEW_CONTENT_URL, function() {
    // Some animation to replace the oldcontent with the new one

    // If a iframe embeded video is buffering, this function doesnt get fired. Only after the buffering has finised.
});

它是jQuery AJAX加载还是Youtube iframe嵌入中的已知错误。有什么我可以做的还是我必须使用对象(swf)嵌入代码来使其起作用。如果是，请告诉我如何使用Youtube API进行对象嵌入。我无法在现有对象上使用“playVideo()”。每当我遇到错误时:
TypeError:“未定义”不是函数(评估“playerArr [“player”]。playVideo()')；

但这也很奇怪，因为我正在为嵌入式swfs使用此功能

var playerArr = [];
function onYouTubePlayerReady(playerId) {
      alert(playerId);
      playerArr[playerId] = document.getElementById(playerId);
      playerArr[playerId].playVideo();

}

是的，我还为视频URL使用了“？enablejsapi = 1”。警报给了我一个“玩家”，这是我的对象的ID。 iframe解决方案虽然会更好。

在此先感谢您的帮助。

Answer 1

我认为从google Api文档中了解它不是一件容易的事，但是要使iframe在我的网站上正常运行，我必须注意以下三点:

1 /加载特定于Iframe的API:https://www.youtube.com/iframe_api

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 /通过API声明正确的回调方式名称是不同的:YouTubeIframeAPIReady 上的

 var player;
 function onYouTubeIframeAPIReady(){
 player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    playerVars: {'autoplay':'0','rel':'0','control':'0','fs':'1'},
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
        }
    });
}

3 /并且一定要确保从不使用此参数:enablejsapi:1

完整的示例来自我们的jQuery插件(丑陋但功能强大):

$(data.settings.contentData).each(function (index, currentData) {
     var html = '<li style="position:relative;float: left">';
     html += '<div id="player"></div>'
     html += "<script type='text/javascript'>"
     html += "var player; "
     html += "var tag = document.createElement('script');"
     html += "tag.src = 'https://www.youtube.com/iframe_api';"
     html += "var firstScriptTag = document.getElementsByTagName('script')[0];"
     html += "firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);"

     html += "function onYouTubeIframeAPIReady() { "
     html += "   player = new YT.Player('player', "
     html += "       {height: '390', width: '640',  videoId: '" + $.trim(currentData.images.zoom) + "', "
     html += "       playerVars: {'autoplay':'0','rel':'0','control':'0','fs':'1'}, "
     html += "       events: {'onReady': onPlayerReady}}"
     html += "   ); "
     html += "}; "
     html += "function onPlayerReady(event) { /* your stuff here */ }</script>";
     html += '</li>';
    containerListImage.append(html);
    var containerImage = containerListImage.children().last();
  ...
}