jQuery的AJAX负荷和YouTube API的iframe [英] jQuery AJAX load and Youtube API iframe

问题描述

我工作的一个网页。我使用jQuery负载（AJAX）函数动态加载新的内容到内容DIV。在这些内容的div有一个形象。当您单击图像上的Youtube嵌入式视频（IFRAME）应该开始。一切正常，到目前为止，但有一件事，这是一种奇怪的：

i'm working on a webpage. I'm using jQuery load (AJAX) function to dynamically load new content into the content div. In each of these content divs there is an image. When you click on that image a Youtube embedded video (iframe) should start playing. Everything works so far, but there is one thing, which is kind of strange:

每当我开始播放YouTube视频缓冲启动。如果我现在想加载新的内容到内容DIV，而缓冲jQuery的负载功能被炒鱿鱼后，缓冲完成。所以有时我不得不等待像以前一样的内容发生变化（简单的HTML内容）10秒钟，因为视频缓冲。如果我不使用的iframe嵌入，但嵌入对象的一切工作，但我想，以支持移动设备，以及（IOS）。所以，只是一个简单的例子来告诉你：

Whenever i start playing a Youtube Video the buffering starts. If i now want to load a new content into the content div while buffering the jQuery load function gets fired after the buffering has finished. So sometimes i'll have to wait like 10 seconds before the content changes (simple HTML content), because the video is buffering. If i'm not using the iframe embed, but the object embed everything works, but i want to support mobile devices as well (iOS). So just a simple example to show you:

$(".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嵌入一个已知的bug。有什么我可以做些什么或做我必须使用对象（SWF）嵌入code，使其工作。如果是的话，请你告诉我，如何使用YouTube API对象嵌入。我不能得到的playVideo（）工作，现有的对象。每次我得到一个错误： 类型错误：未定义不是一个函数（评估'。playerArr [玩家]的playVideo（）'）;

Is it a known bug in jQuery AJAX load or Youtube iframe embed. Is there anything i can do about it or do i have to use the object (swf) embed code to make it work. If yes, could you please tell me, how to use the Youtube API for object embeds. I can't get "playVideo()" to work on an existing object. Everytime i'm getting an error: TypeError: 'undefined' is not a function (evaluating 'playerArr["player"].playVideo()');

但是，这是奇怪的为好，因为我使用这个功能的嵌入式主权财富基金

But that is strange as well, because i'm using this function for the embedded swfs

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

}

是的，我也用？enablejsapi = 1的视频网址。警报给了我一个球员，这是ID为我的对象。 iframe的解决方案将是更好不过。

And yes, i also used "?enablejsapi=1" for the Video URL. The alert gives me a "player", which is the id for my object. The iframe solution would be better though.

在此先感谢您的帮助。

推荐答案

我觉得这不是很容易理解的，从谷歌的API文档，但得到的iframe在我的网站正常运行，我必须要小心对以下3点：

I think it's not very easy understandable from the google Api doc but to get iframe properly running on my site I had to be carefull about the 3 following points :

1 /获取加载的iframe特定的API： https://www.youtube.com/iframe_api

1/ Get the Iframe specific API loaded : 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 /和finnaly一定要永远使用此参数：enablejsapi：1

3/ and finnaly be sure to never use this parameter : enablejsapi : 1

这是我们的jQuery撑着全样本（丑陋但functionnal）：

full sample from our jQuery pluggin (ugly but functionnal) :

$(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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！