1

我正在做一个网页。我正在使用 jQuery 加载 (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' is not a function (evalating 'playerArr["player"].playVideo()');

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

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

}

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

在此先感谢您的帮助。

4

1 回答 1

1

我认为从 google 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();
  ...
}
于 2013-04-12T14:50:48.650 回答