我希望我可以循环播放这组视频和图像，我该怎么做？答案

【问题标题】：I wish I could loop this array of videos and images, how can I do?我希望我可以循环播放这组视频和图像，我该怎么做？
【发布时间】：2021-07-17 12:37:46
【问题描述】：

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

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

【问题讨论】：

我分享了一个解决方案，如果你想从头开始循环播放列表。

标签： arrays function youtube constants

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

您也可以像这样更新开关盒：

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

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

【讨论】：

【解决方案2】：

感谢 Abhi，但是当最后一个视频播放完毕后，它不会自动转到第一个视频，但只有在我单击“下一步”按钮时才会播放。即使我不使用“下一步”按钮，我也需要进入循环。

【讨论】：

在 switch case 中复制相同的逻辑。我已经更新了我的答案。