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視頻未加載播放列表

回答

相關問題