無法獲取YouTube視頻的自定義播放列表

第一個視頻播放，但不是我列表中的下一個視頻。我已經複製了YouTube API example的初始代碼。也使用this SO answer的onPlayerStateChange（event）的想法。無法獲取YouTube視頻的自定義播放列表

第一個視頻播放正常。使用Firebug，我也可以看到它進入playnextvideo（）函數。但是，下一個視頻不播放。我也嘗試在該函數的最後一行添加

player.playVideo()

，但我得到一個錯誤說「player.playVideo（）不是一個函數」。以下是我的整個<body>部分。此頁面中沒有其他腳本。

<div id="container"> 
<div id="content"> 
    <div class="fixedwidthlower"> 
    <?php 
     require 'dbconn.inc'; //database connection code 
     echo "<div id=\"SongList\"><ul id = \"songs\">"; 
     $list = explode(" ", $_POST['playlist']); 
     $hlist = array(); 
     for($i=0; $i<count($list); $i++){ 
      $sql = "SELECT * FROM songs where aikey = " . $list[$i] . ";"; 
      $result = $conn->query($sql); 
      $row = $result->fetch_assoc(); 
      if ($i==0) 
       $liclass = " class=\"active\""; 
      else 
       $liclass = ""; 
      echo "<li" . $liclass . "><a href=\"" . $row["URL"] . "\">" . $row["Song"] . " (" . substr($row["URL"], stripos($row["URL"], "=") + 1) . ")</a></li>"; 
      $hlist[] = substr($row["URL"], stripos($row["URL"], "=") + 1); 
     } 
     echo "</ul></div>"; 
     echo "<div id=\"Player\">"; 
     for($i=0; $i<count($hlist); $i++){ 
      echo $hlist[$i] . " "; 
     } // This loop puts the raw videoids into the Player Div 
      // which are then read by the first line in javascript below 
      // Example: "usNsCeOV4GM 8pPvNqOb6RA cwqhdRs4jyA XcATvu5f9vE WANNqr-vcx0 t-iJ47in9YQ OMOGaugKpzs l3LFML_pxlY mLDDxfFKd9Y 9Z4rmlyuH-s " 
     echo "</div>"; 
     $conn->close(); 
    ?> 
</div> 
</div> 
<script type="text/javascript"> 
     var videolist = document.getElementById("Player").innerHTML.split(" "); 
     var i =0; 
     var video = videolist[i]; 
     function playnextvideo(){ 
      i++; 
      video = videolist[i]; 
      playmyvideo(); 
      player.playVideo(); 
     } 
     var tag = document.createElement('script'); 
     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     var player; 
     function onYouTubeIframeAPIReady() { 
      playmyvideo(); 
     } 
     function playmyvideo() { 
       player = new YT.Player('Player', { 
       height: '390', 
       width: '640', 
       videoId: video, 
        events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 
     function onPlayerReady(event) { 
      event.target.playVideo(); 
     } 
     function onPlayerStateChange(event) { 
      if (event.data === 0) { 
       playnextvideo(); 
      } 
     } 
     console.log(i); 
     console.log(video); 
    </script>

該php代碼可能不相關，但我已經表明它的完整性。我沒有包括CSS，因爲它可能不相關（沒有顯示：沒有 divs，因爲我看到在其他問題中導致問題）。如果你想要一個鏈接到這個頁面，我可以提供這個...

謝謝你的幫助！

來源

2015-12-21 Chiwda

您需要修改您的實現並使用loadPlaylist or cuePlaylist函數，因爲它可以完美地解決您的問題，而無需執行太複雜的代碼。

使用loadPlaylist可以加載指定的playList並播放它。在下面的示例中，我指定了要在onPlayerReady事件中播放的視頻ID列表。

（你可以嘗試在jsFiddle運行下面的代碼）

<div id="player"></div> 
<script> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var player; 
    function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    function onPlayerReady(event) { 
    event.target.loadPlaylist(['RB-RcX5DS5A','QtXby3twMmI']); 
    } 
    var done = false; 
    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     done = true; 
    } 
    } 
function stopVideo() { 
    player.stopVideo(); 
} 
</script>

來源

2015-12-22 11:33:41 goblin

我會嘗試這一點，但是這不利於大局。我希望能夠播放來自其他網站的視頻。因此，我將切換到另一個使用不同的API實例化不同玩家的函數。 Vimeo當Vimeo視頻出現時。 – Chiwda

Thanx！它的工作，所以我已經接受你的答案。但是，我現在意識到我的架構是錯誤的。我必須將循環放在YouTube API（和其他API）之外。咄！ – Chiwda

無法獲取YouTube視頻的自定義播放列表

回答

相關問題