CODEWITHSUNDEEP
youtubeyoutube-apishuffle
RobbTe
RobbTe

Reputation: 405

Youtube API; shuffle playlist?

So for some time now I am trying to make a proper shuffle script, using the youtube api, in order to play my youtube playlist. I've found a lot of examples, but none of them seem to be working very well. Some do shuffle the list but not the first song being played, and some do the precise opposite.

What I would like is to shuffle the full playlist and then start playing. So the first played song should be random and the next one played should be random/shuffled as well.

Ive found the script below to shuffle the playlist. However the first song played is not shuffled. Can someone help me out with this? Thanks a million!

<html>
  <body>
    <div id="player"></div>
    <script>
        // 2. 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);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        function onYouTubeIframeAPIReady() {
            var player = new YT.Player("player", {
                height: '390',
                width: '640',
                events: {
                    'onReady': function (event) {
                        event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
                        event.target.playVideo();
                        setTimeout(function() {
                            event.target.setShuffle({'shufflePlaylist' : true});
                        }, 1000);
                    }
                }
            });
        }
    </script>
  </body>
</html>

Upvotes: 1

Views: 4571

Answers (2)

jcb01
jcb01

Reputation: 97

This works using youtube api. and users youtube created play list . shuffles the play list into new order every time page is refreshes

  1. Load YT-player API.
  2. Load YT-playlist user playlist id "**.youtube.com/playlist?list=PLo16_*******"
  3. To Shuffle playlist use > player.setShuffle(true);
  4. To Start YT-player at video 1 in shuffled playlist use > player.playVideoAt(0)

working demo Responsive shuffled YouTube Playlist on Google sites

code jsfiddle.net

<!DOCTYPE html>
<html>
<!-- Responsive YouTube shuffled playlist player -->
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag.  
style =  replaces  size in the player script makes it responsive -->

<div style=" top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
id='player'>
</div>
</body>

<script>
  // 2. 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);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: {
  autoplay: 0,
  loop: 1,
  controls: 1,
  showinfo: 1,
  frameborder: 1,
  'listType': 'playlist',
  'list': "PLo16_DLriHp4A8BvkJFZfO_4KDVv7yGgy", // your YouTube playlist id here
 },

 events: {
  'onReady': onPlayerReady,
  'onStateChange': onPlayerStateChange
 }
 });
 }

  // 4. The API will call this function when the video player is ready.

 function onPlayerReady(event) {
  // first shuffle play list 

 player.setShuffle(true); 

  // Onload and on refresh shuffles the users YT playlist but always starts playing 
  // the first video in the original list at its new index position 
  //ie. video (1) = video( new shuffled pos ?)
  // to get over this we can start the player at the new shuffled playlist 
  //video 1(index=0) this changes every time it's refreshed

 player.playVideoAt(0) 

 }
  // 5. The API calls this function when the player's state changes.
  //  option to to add bits         
 function onPlayerStateChange(event) {
  const player = event.target;
 }

 </script>

 </html>

Upvotes: 1

RobbTe
RobbTe

Reputation: 405

This worked for me!

<html>
  <body>
    <div id="player"></div>
    <script>
        // 2. 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);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        function onYouTubeIframeAPIReady() {
            var numPl = Math.floor((Math.random() * 50) + 1);
            var player = new YT.Player("player", {
                height: '390',
                width: '640',
                playerVars: {
                    listType:'playlist',
                    list:'PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT',
                    index: numPl,
                    autoplay: 1,
    },
                events: {
                    'onReady': function (event) {
                        //event.target.cuePlaylist({list: "PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT"});
                        //event.target.playVideo();
                        setTimeout(function() {
                            event.target.setShuffle({'shufflePlaylist' : true});
                        }, 1000);
                    }
                }
            });
        }
    </script>
  </body>
</html>

Upvotes: 3

Related Questions