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 加载函数.因此，有时我必须等待 10 秒左右才能更改内容(简单的 HTML 内容)，因为视频正在缓冲.如果我没有使用 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 嵌入中的已知错误.有什么我可以做的，或者我必须使用对象 (swf) 嵌入代码才能使其工作.如果是，请告诉我如何使用 Youtube API 进行对象嵌入.我无法让playVideo()"处理现有对象.每次我收到错误时:TypeError: 'undefined' 不是一个函数(评估 'playerArr["player"].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()');

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

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"作为视频 URL.警报给了我一个玩家"，这是我的对象的 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.

预先感谢您的帮助.

推荐答案

我认为从 google 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

2/ Declare the correct callback wich name is different by 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

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

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

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屋！