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

【问题标题】：Unable to get a custom playlist for YouTube videos to work无法让 YouTube 视频正常工作的自定义播放列表
【发布时间】：2015-12-21 16:59:55
【问题描述】：

第一个视频播放，但不是我列表中的下一个视频。我已经从YouTube API example 复制了初始代码。还有使用 this SO answer 的 onPlayerStateChange(event) 的想法。

第一个视频播放正常。使用 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，因为它可能不相关（没有 display:none div，因为我在其他问题中看到过导致问题）。如果你想要这个页面的链接，我也可以提供...

感谢您的帮助！

【问题讨论】：

标签： javascript youtube youtube-api playlist

【解决方案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>

【讨论】：

我会试试这个，但这对全局没有帮助。我希望能够播放来自其他网站的视频。因此，我将切换到另一个使用不同 API 实例化不同播放器的函数。出现 Vimeo 视频时的 Vimeo。
谢谢！它有效，所以我接受了你的回答。然而，我现在意识到我的架构是错误的。我必须将循环放在 YouTube API（和其他 API）之外。呵呵！