创建一个随机的youtube视频播放器

Create a random youtube video player

本文关键字：youtube 视频 播放器 随机 一个 创建      更新时间：2023-09-26

我想创建一个youtube视频播放器，每次访问网页时都会重新排列一组视频，然后按照排列的顺序播放。

到目前为止，我的代码能够从阵列中随机选择一个视频播放，然后随机选择另一个视频并播放。

问题是视频重叠。当它随机化数组时，我希望所有数组都按顺序播放：比如3,2,1或2,1,3或3,1,2。没有重复。

目前，它将播放3个视频的任何次数。

此函数将在每次访问页面时打乱数组，此部分起作用。

function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex;
        // While there remain elements to shuffle...
        while (0 !== currentIndex) {
          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;
          // And swap it with the current element.
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
        }
        return array;
      }

此代码改编自https://developers.google.com/youtube/iframe_api_reference

  // 1. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  // 2. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  var list = ['rgAYRbeO9GI','6wKxfH9NpVE','OJ9qLosjjH8']
  shuffle(list); // shuffles the array

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '585',
      width: '960',
      // videoId: list[Math.floor(Math.random() * list.length)],
      videoId: list[0], // accesses the first index of the newly sorted list array, Ideally I want to play the next video
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  // 3. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }
  // 4. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED && !done) { // once the video is finished the onPlayerReady() function repeats.
      onPlayerReady();
      done = true;
    }
  }

我需要一种方法将list[0]索引移到下一个索引，我不确定将循环放在哪里。有什么想法吗？

我设法使用以下代码随机化了一个youtube播放列表：

var playlistLength = 198;
function onPlayerReady(event) {
          player.cuePlaylist({
          'listType': 'playlist',
          'list': 'PLCEwouDaI4SXpFtD8wVnPY7wfx7LpXXRw',
          'index' : [Math.floor(Math.random() * playlistLength)]
         });
setTimeout( function() { 
          //event.target.stopVideo();
          //event.target.playVideoAt(3);
          event.target.setShuffle(true); 
          event.target.playVideo();
          event.target.setLoop(true);
          }, 
        1000);
      }
相关文章：