Question

播放第一个视频，但不播放列表中的下一个视频。我复制了YouTube API example的初始代码。还有从this SO answer使用onPlayerStateChange（事件）的想法。

第一个视频播放正常。使用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，因为我看到在其他问题中导致问题）。如果你想要一个指向该页面的链接，我也可以提供...

Thanx为你提供帮助！

Answer 1

您需要修改您的实施并使用loadPlaylist or cuePlaylist功能，因为它可以完美地解决您的问题，而无需执行太多复杂的代码。

使用loadPlaylist可以加载指定的playList并播放它。在下面的示例中，我指定了一个我想在onPlayerReady事件中播放的视频ID列表。

（您可以尝试在jsFiddle）

中运行以下代码

function profileCtrl($rootScope, $scope, $http, $location, $window, $cookies, toaster, 

    $scope.processFiles = function(file, event, flow) {
        flow.defaults.headers = function(file, chunk, isTest) {
            return {
                'X-CSRFToken': $cookies.get("csrftoken")
    };}

无法获取YouTube视频的自定义播放列表

1 个答案: