无法让 YouTube 视频的自定义播放列表正常工作

Question

播放第一个视频，但不播放列表中的下一个视频。我已经从 YouTube API example. Also the idea of using onPlayerStateChange(event) from this SO answer.

复制了初始代码

第一个视频播放正常。使用 Firebug，我还可以看到它进入了 playnextvideo() 函数。但是，下一个视频不会播放。我也尝试添加

 player.playVideo()

在该函数的最后一行，但我收到一条错误消息 "player.playVideo() is not a function"。下面是我的整个 <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 因为它可能不相关（没有 display:none div 正如我在其他问题中看到的那样导致问题）。如果你想要一个 link 到这个页面，我也可以提供...

感谢您的帮助！

Answer 1

您需要修改您的实现并使用 loadPlaylist or cuePlaylist 函数，因为它可以完美解决您的问题，而无需实现太多复杂的代码。

使用 loadPlaylist 可以加载指定的播放列表并播放它。在下面的示例中，我指定了要在 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>

无法让 YouTube 视频的自定义播放列表正常工作

Unable to get a custom playlist for YouTube videos to work

javascript

youtube

youtube-api

playlist