Question

我有一个由3个哈希组成的数组（playListArray），每个哈希代表一个YouTube剪辑，其中包含youtubeID，开始时间和结束时间。

当我加载YouTube iFrame Player时，它成功加载了数组中的第一个视频剪辑。我单击播放器的播放按钮，然后看到2秒钟的片段正在播放，直到在预定的结束时间结束。到目前为止，console.log看起来像这样：

控制台

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();
}

Answer 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>

YouTube iFrame Player API无法播放数组中的第二个视频

1 个答案: