YouTube iFrame Player API 不播放数组中的第二个视频答案

【问题标题】：YouTube iFrame Player API not playing second video in arrayYouTube iFrame Player API 不播放数组中的第二个视频
【发布时间】：2018-12-10 05:45:47
【问题描述】：

我有一个包含 3 个哈希的数组 (playListArray)，每个哈希代表一个带有 youtubeID、开始时间和结束时间的 YouTube 剪辑。

当我加载 YouTube iFrame 播放器时，它成功加载了数组中的第一个视频剪辑。我单击播放器的播放按钮，看到 2 秒的片段正在播放，直到它在预定义的结束时间结束。到目前为止，console.logs 如下所示：

控制台

done is: false
Playlist index on state change is: 0
Video Unstarted 
done is: false 
Playlist index on state change is: 0 
Video Buffering
done is: false 
Playlist index on state change is: 0 
Video Playing 
done is: true 
Playlist index on state change is: 0 
Video Buffering
done is: true 
Playlist index on state change is: 0 
Video Playing 
done is: true 
Playlist index on state change is: 0
Video Paused
done is: true 
Playlist index on state change is: 0
Video ended

我遇到的问题是播放器似乎没有播放数组中的第二个视频。控制台确实记录了播放器的状态变化，即在此期间的“正在播放”、“暂停”和“结束”，但它会立即执行此操作，而无需通过屏幕上的播放器播放。然后它快速移动到播放阵列中的下一个剪辑。控制台日志的其余部分如下所示：

控制台（续）

done is: false
Playlist index on state change is: 1
Video Playing
done is: true
Playlist index on state change is: 1
Video Paused
done is: true
Playlist index on state change is: 1
Video ended
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
Video Buffering
done is: false
Playlist index on state change is: 2
Video Unstarted
done is: false
Playlist index on state change is: 2
Video Buffering
done is: false
Playlist index on state change is: 2
Video Playing
done is: true
Playlist index on state change is: 2
Video Buffering
done is: true
Playlist index on state change is: 2
Video Playing
done is: true
Playlist index on state change is: 2
Video Paused
done is: true
Playlist index on state change is: 2
Video ended
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended
done is: false
Playlist index on state change is: 3
Video Unstarted
done is: false
Playlist index on state change is: 3
done is: false
Playlist index on state change is: 3
Video Unstarted
done is: false
Playlist index on state change is: 3
Video Buffering
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Buffering
done is: true
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended
done is: false
Playlist index on state change is: 3
Video Playing
done is: true
Playlist index on state change is: 3
Video Paused
done is: true
Playlist index on state change is: 3
Video ended

app.js

loadYouTubeIframeAPI();

function loadYouTubeIframeAPI() {
    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() {
    player = new YT.Player("player", {
        height: "390",
        width: "640",
        enablejsapi: 1,
        playerVars: {
            autoplay: 1,
            controls: 1,
            rel: 0,
            showinfo: 0,
            iv_load_policy: 3,
            modestbranding: 0
        },
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    });
}

var playListArray = [
{youtubeID: "ZM_8-c1EqOY", start: 10, end: 12},
{youtubeID: "Zs5NOrYYV2s", start: 20, end: 22},
{youtubeID: "ZM_8-c1EqOY", start: 10, end: 12}
];


var playlistIndex = 0;

function onPlayerReady(event) {
    event.target.loadVideoById({
        videoId: playListArray[playlistIndex].youtubeID,
        startSeconds: playListArray[playlistIndex].start,
        endSeconds: playListArray[playlistIndex].end
    });
    event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    console.log("done is: " + done);
    console.log("Playlist index on state change is: " + playlistIndex);
    if (event.data == YT.PlayerState.ENDED && done == true) {
        console.log("Video ended");
        if (playlistIndex <= playListArray.length - 1) {
            event.target.loadVideoById({
                videoId: playListArray[playlistIndex].youtubeID,
                startSeconds: playListArray[playlistIndex].start,
                endSeconds: playListArray[playlistIndex].end
            });
            playlistIndex++;
        }
        done = false;
    } else if (event.data == YT.PlayerState.CUED) {
        console.log("Video Cued");
    } else if (event.data == YT.PlayerState.PLAYING) {
        console.log("Video Playing");
        done = true;
    } else if (event.data == YT.PlayerState.BUFFERING) {
        console.log("Video Buffering");
    } else if (event.data == YT.PlayerState.PAUSED) {
        console.log("Video Paused");
    } else if (event.data == YT.PlayerState.UNSTARTED) {
        console.log("Video Unstarted");
    }
}

function stopVideo() {
    player.stopVideo();
}

【问题讨论】：

标签： javascript youtube-api youtube-data-api youtube-javascript-api youtube-iframe-api

【解决方案1】：

只需根据您的规范修改它，Youtube IFrame Getting Started。

这是重要的部分。

 var player;
 var ctr = 0; //we create a counter to track the index of the playlist

//after playing the very first video, we queue a list of videos
 var done = false;  
 function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED && done) {
           console.log("load another video");
           player.loadPlaylist(["au2n7VVGv_c","SC4xMk98Pdc","SLsTskih7_I"],ctr);
           ctr++; //increment ctr so we don't keep playing the 1st video. 
                  //Instead this will play all videos in playlist.          
        }      
  }

.. 这是完整的代码。复制、粘贴、执行。

<!DOCTYPE html>
<html>
  <body>
    <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;
      var ctr = 0;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          //setTimeout(stopVideo, 6000);
          done = true;
        }
        if (event.data == YT.PlayerState.ENDED && done) {
           console.log("load another video");
           player.loadPlaylist(["au2n7VVGv_c","SC4xMk98Pdc","SLsTskih7_I"],ctr);
           ctr++;          
        }

      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

【讨论】：