Erstellen Sie einen zufälligen Youtube-Video-Player

Question

Ich möchte einen Youtube-Video-Player erstellen, der jedes Mal, wenn auf die Webseite zugegriffen wird, ein Array von Videos neu anordnet und sie dann in dieser Reihenfolge wiedergibt.

Bis jetzt ist mein Code in der Lage, ein zufälliges Video aus dem Array zu wählen, es dann nach dem Zufallsprinzip ein anderes Video auszuwählen und es zu spielen.

Das Problem damit ist, dass die Videos überlappen. Wenn es das Array randomisiert, möchte ich alle nacheinander abspielen: wie 3,2,1 oder 2,1,3 oder 3,1,2. Ohne Wiederholungen.

Im Moment wird es jedes Video der 3 beliebig oft abspielen.

Diese Funktion wird das Array bei jedem Zugriff auf die Seite mischen, dieser Abschnitt funktioniert.

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

Dieser Code von 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; 
    } 
    } 

ich einen Weg brauchen, um die nächste um die Liste zu bewegen angepasst ist, bilden [0] Index, ich bin nicht sicher, wo die Schleife zu setzen. Irgendwelche Ideen?

Answer 1

ich es geschafft, ein YouTube-Playlist mit diesem Code randomisieren:

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