Youtube视频未加载播放列表

我遇到了使用YouTube IFrame API排列播放列表的问题。（https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions）Youtube视频未加载播放列表

我使用的是Flash来显示YouTube视频。使用HTML5显示视频加载之前多次调用videoplayback调用的另一个问题。

加载播放列表时，视频本身不加载。它显示在网络选项卡中，作为对视频播放回放的调用，它是“挂起”的，直到它在7.5分钟后超时，此时它再次尝试并且一切正常。顺便说一下，播放列表已成功加载 - 将鼠标悬停在YouTube上，iframe显示已加载的播放列表。

的代码复制，这是下面，这个问题被发现以下步骤： 1.单击通道 2.如果信道负载，转到1，否则检查网络选项卡。

我知道复制的方法是有意思的，但是我在第一次加载时看到这个'有时' 。

播放频道没有出现问题 - 这已被用于许多不同的频道。

是我的代码吗？有没有解决办法？有没有修复？

测试在Windows上使用Chrome 28，Firefox的22.0和IE 10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
     <title> 
      Youtube Test 
     </title> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type='text/javascript'> 
var collection = []; 
var player = null; 
var playlistEnqueued = false; 

function clear() { 
    // Removes the iframe. 
    if (player !== null) { 
     player.destroy(); 
    } 

    collection = []; 
    playlistEnqueued = false; 
    player = null; 
} 

function createYT(videoId) { 
    // Clear anything that's up currently 
    clear(); 

    // Yes, this could be $.ajax, however this way reduces the dependency on jQuery 
    // further for the purposes of this test. 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      parseJSONResponse(JSON.parse(xmlhttp.responseText)); 
     } 
    } 
    xmlhttp.open("GET", "https://gdata.youtube.com/feeds/users/" + videoId + "/uploads?alt=json", true); 
    xmlhttp.send(); 
} 

function parseJSONResponse(data) { 
    var feed = data.feed; 
    $.each(feed.entry, function(index, entry, list) { 
     collection.push(entry.id.$t.match('[^/]*$')[0]); 
    }); 
    playVideo(); 
} 

function playVideo(videoId) { 
    try { 
     if (videoId === undefined || videoId === null) { 
      videoId = collection[0]; 
     } 
     if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') { 
      window.onYouTubeIframeAPIReady = function() { 
       playVideo(videoId); 
      }; 
      $.getScript('//www.youtube.com/iframe_api'); 
     } else { 
      if (playlistEnqueued === true) { 
       player.playVideoAt(0); 
      } else { 
       player = new YT.Player('video', { 
        events: { 
         'onReady':function(event) { 
          try { 
           player.cuePlaylist(collection); 
          } catch (e) { 
           console.error(e); 
          } 
         }, 
         'onError':function(error) { 
          console.error(error); 
         } 
        }, 
        videoId: videoId, 
        width: 425, 
        height: 356, 
        playerVars: { 
         autoplay: 1, 
        } 
       }); 

       // Attaching event listener after object creation due to 
       // http://stackoverflow.com/questions/17078094/youtube-iframe-player-api-onstatechange-not-firing 
       player.addEventListener('onStateChange', function(state) { 
        try { 
         stateChanged(state); 
        } catch (e) { 
         console.error(e); 
        } 
       }); 
      } 
     } 
    } catch (e) { 
     console.error(e); 
    } 
} 

function stateChanged(state) { 
    // This state will be called on enqueueing a playlist 
    if (state.data == 5) { 
     playlistEnqueued = true; 

     playVideo(); 
    } 
} 

$(document).on('ready', function() { 
    var player = $(document).find("#player"); 

    $("a").on('click', function() { 
     var channel = $(this).attr('data-channel'); 
     createYT(channel); 
     return false; 
    }); 
}); 

     </script> 
    </head> 
    <body> 
     <div class='test'> 
      <div id='video'> 
      </div> 
      <a href='#' data-channel='mit'>MIT</a> 
      <a href='#' data-channel='tedtalksdirector'>TED</a> 
      <a href='#' data-channel='minutephysics'>Minute Physics</a> 
     </div> 
    </body> 
</html>

使用闪光灯时7 32位，并在等待视频连接超时，然后再试一次下面是在网络选项卡中看到。正如您可以看到它处于“挂起”状态，失败，然后在7.5分钟后再次尝试。

的Chrome网络选项卡中，一旦视频开始播放： Chrome network tab on video playback

更多图片时，我得到近10声誉......

来源

2013-07-18 Dominic Orme

我有这件事和的jsfiddle（http://jsfiddle.net/3Bm2V/5/）上运行，它似乎工作正常。我也必须改变

$(document).on('ready', function() {

到

$(function() {

得到它在工作的jsfiddle，所以尽量上面的链接，看看它现在为你的作品？

来源

2013-07-18 16:05:52 TFk

很遗憾没有。我无法将图像放到SO上，所以我无法告诉你Chrome浏览器的网络标签是什么样子，但即使在您的JS Fiddle中，我也已经设法复制了我所描述的问题。 –

你的脚本似乎在工作。我添加了：<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Strict // EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> at在开头的页面顶部和。 – Als

在Chrome中，我点击链接TED后出现这些错误，但第一个视频已加载并开始自动播放。控制台中的错误是：阻止来源“http://www.youtube.com”的框架访问源自“http：// localhost”的框架。协议，域和端口必须匹配。 www-embed-player-vflT5t3ca.js：217 g.Ua www-embed-player-vflT5t3ca。js：217 g.vd www-embed-player-vflT5t3ca.js：216 g.qb www-embed-player-vflT5t3ca.js：215 （匿名函数）www-embed-player-vflT5t3ca.js：209 Uncaught TypeError：无法调用未定义的方法'apply'www-widgetapi-vfluS_Dp5.js：22 – Als

Youtube视频未加载播放列表

回答

相关问题