我希望我可以循环播放这一系列的视频和图像，我该怎么做？

Question

在此演示中 http://jsfiddle.net/mdz82oLn/ 我插入了视频 (ID) 和图像（png、jpeg 等），它们也通过自定义按钮显示。该演示在视觉中完美运行，但在循环中到达最后一个视频的结尾 returns 而它应该从列表中的第一个视频重新开始，如何集成此功能？

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

const playerElement = document.querySelector('#player');
const imageElement = document.querySelector('#slide');

const videos = {
'RGpr3Y6Q-1M': 'http://nothingbutgeek.com/wp-content/uploads/2018/06/automata_16x9.png',
'btxdcqLOGuc': 'https://live.staticflickr.com/2400/2078946248_d063d5a563_b.jpg',
'CIx0a1vcYPc': 'https://i.ytimg.com/vi/CIx0a1vcYPc/maxresdefault.jpg',
};

const videoIds = Object.keys(videos);

function onYouTubeIframeAPIReady() {
  function onPlayerReady({ target }) {
    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
      target.playVideo();
    });
    
    var pauseButton = document.getElementById("pause-button");
    pauseButton.addEventListener("click", function() {
      target.pauseVideo();
    });  

    var next = document.getElementById("next");
    next.addEventListener("click", function() {
      target.nextVideo();
    });
      
    var pre = document.getElementById("previous");
    pre.addEventListener("click", function() {
      target.previousVideo();
    });
      
    target.loadPlaylist({
      playlist: videoIds
    });
  }

function onPlayerStateChange({ data, target }) {
    switch(data) {
      case YT.PlayerState.ENDED:
        target.nextVideo();
        break;

      case YT.PlayerState.BUFFERING:
        const playlist = target.getPlaylist();
        const playlistIndex = target.getPlaylistIndex();
        const currentId = playlist[playlistIndex];
        const image = videos[currentId];

        if (imageElement.src !== image) {
          imageElement.src = image;
        }
        break;
    }
  }
    const player = new YT.Player(playerElement, {
    height: '405',
    width: '720',
    playerVars: {
      controls: 1,
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

Answer 1

如果我理解正确的话，您卡在了最后一个视频上，想从 1 个视频开始循环：

在那种情况下，这样的更改应该有效：

var next = document.getElementById("next");
    next.addEventListener("click", function() {
      target.nextVideo();
      if(target.getPlaylistIndex() == videoIds.length -1){
      target.loadPlaylist({
      playlist: videoIds
    });
      }
    });

Updated your Example

你也可以像这样更新 switch case:

case YT.PlayerState.ENDED: {
                if (target.getPlaylistIndex() == videoIds.length - 1) {

                    target.loadPlaylist({
                        playlist: videoIds
                    });
                }
                break;
                }

我希望我可以循环播放这一系列的视频和图像，我该怎么做？

I wish I could loop this array of videos and images, how can I do?

arrays

function

youtube

constants