ランダムなYouTube動画プレーヤーを作成する

Question

ウェブページにアクセスするたびに動画の配列を並べ替える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; 
     } 

これは私が次へ[0]インデックスリストを形成する移動する方法が必要です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; 
    } 
    } 

からコード適合している、私はループをどこに置くかわかりません。何か案は？

Answer 1

私はこのコードを使用してユーチューブプレイリストをランダム化するために管理：

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