Question

我在网页上工作。我正在使用jQuery load（AJAX）函数将新内容动态加载到内容div中。在这些内容div中的每一个中都有一个图像。当您点击该图片时，Youtube嵌入式视频（iframe）应该开始播放。一切都运作到目前为止，但有一件事，有点奇怪：

每当我开始播放Youtube视频时，缓冲就会开始。如果我现在想要将新内容加载到内容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：'undefined'不是函数（评估'playerArr [“player”]。playVideo（）'）;

但这也很奇怪，因为我将这个函数用于嵌入式swfs

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

}

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

提前感谢您的帮助。

Answer 1

我认为从谷歌Api文档中理解起来并不容易，但为了让iframe在我的网站上正常运行，我必须小心以下3点：

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的名称不同的正确回调： onYouTubeIframeAPIReady

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

jQuery AJAX加载和Youtube API iframe

1 个答案: