给不同的videoID添加不同的功能

Question

我想向视频 ID (YT API) 列表中的每个视频添加不同的事件，例如：在视频播放时显示图像，每次转到下一个视频加载时一个不同的形象。你能帮我理解如何实现代码吗？这是一个视觉示例

<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:grey;">

<div id="player" style="position:absolute;top: 0%;left: 50%; transform: translate(-50%, 5%);z-index:10"></div>
<div id="pulsanti" style="position:absolute;top: 5%;left: 50%; transform: translate(-50%, 420px);">
<button class="button" id="previous">PREVIOUS</button>
<button class="button" id="play-button">PLAY</button>
<button class="button" id="pause-button" >PAUSE</button>
<button class="button" id="next">NEXT</button>
<button class="button" id="stop-button">STOP</button>
<div style="position:absolute;top: 0%;left: 50%; transform: translate(-50%, 35px);" ><img src="01.png" id="slide" alt="" width="500" height="300" ></div>
<div class="buttons" id="controls"></div>

<script type="text/javascript">
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 videoIDs = [
  'RGpr3Y6Q-1M',   /* video1 */
  'btxdcqLOGuc',   /* video2 */
  'CIx0a1vcYPc'  /* video3 */
];


var player, currentVideoId = 0;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '450',
    width: '800',
    playerVars: {
      controls: 1,
      showinfo: 0,
      rel: 0,
      showsearch: 0,
      iv_load_policy: 3,
      autoplay: 1,
      mute: 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.loadVideoById(videoIDs[currentVideoId]);
  
    // bind events
    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
        player.playVideo();
    });

    var pauseButton = document.getElementById("pause-button");
    pauseButton.addEventListener("click", function() {
        player.pauseVideo();
    });

    var stopButton = document.getElementById("stop-button");
    stopButton.addEventListener("click", function() {
        player.stopVideo();
    });
 var next = document.getElementById("next");
    next.addEventListener("click", function() {
        player.nextVideo();
    });
    
 var pre = document.getElementById("previous");
    pre.addEventListener("click", function() {
        player.previousVideo();
    });
    
     player.loadPlaylist( {
        playlist:videoIDs
    } );
    
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    currentVideoId++;
    if (currentVideoId < videoIDs.length) {
      player.loadVideoById(videoIDs[currentVideoId]);
    }
  }
}
</script>

</body></html>

他们建议我添加图像作为视频 ID，但我不知道如何连接事件

var images = [
  'image1.png',    /* about-video1 */
  'image2.png',    /* about-video2 */
  'image3.png'     /* about-video3 */
];

Answer 1

将图像连接到视频 ID 的一种简单方法是将它们配对到一个对象中。使用此模式，您将获得彼此对应的一组 ID 和图像。

我制作了一个对象，其中包含表示视频 id 的键和表示视频 src 图像的值。

只要视频开始缓冲，就会检索 playlist。这是表示视频 ID 的字符串数组。然后将播放列表中的当前索引检索到 select 播放列表中的当前播放 ID。

现在我们有了当前 ID，有了它，我们可以 select 与我们之前创建的对象的 ID 对应的图像。

<div id="player" style="position:absolute;top: 0%;left: 50%; transform: translate(-50%, 5%);z-index:10"></div>
<div id="pulsanti" style="position:absolute;top: 5%;left: 50%; transform: translate(-50%, 420px); z-index:11;">
<button class="button" id="previous">PREVIOUS</button>
<button class="button" id="play-button">PLAY</button>
<button class="button" id="pause-button" >PAUSE</button>
<button class="button" id="next">NEXT</button>
<button class="button" id="stop-button">STOP</button>
<div style="position:absolute;top: 0%;left: 50%; transform: translate(-50%, 35px);" ><img src="01.png" id="slide" alt="" width="500" height="300" ></div>
<div class="buttons" id="controls"></div>

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': 'https://placeimg.com/640/480/nature',
  'btxdcqLOGuc': 'https://placeimg.com/640/480/people',
  'CIx0a1vcYPc': 'https://placeimg.com/640/480/tech'
};

// Create an array of ids from the videos array.
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 stopButton = document.getElementById("stop-button");
    stopButton.addEventListener("click", function() {
      target.stopVideo();
    });

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

  // Whenever a video ends, load the next video.
  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: '505',
    width: '900',
    playerVars: {
      controls: 0,
      showinfo: 0,
      rel: 0,
      showsearch: 0,
      iv_load_policy: 3,
      autoplay: 1,
      mute: 1
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

给不同的videoID添加不同的功能

add different functions to different videoID

javascript

youtube

arrays

api

function