CODEWITHSUNDEEP
javascriptyoutubeyoutube-api
TechRemarker
TechRemarker

Reputation: 2938

Example YouTube Playlist Code?

I'd like to create a playlist that loads all the videos a specific user has uploaded.

I was suggested to use the following code (assuming the account to pull in is YouTube):

loadPlaylist( { listType: 'user_uploads', list: 'youtube' } );

I have looked over the API pages as well: http://code.google.com/apis/youtube/js_api_reference.html

But I can't find an actual example code that uses load playlist. Being completely new to YouTube API I have no idea what type of wrapper code I need to make the above work. Something like this (of course I'm missing parts):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>    
<script type="text/javascript">
loadPlaylist( { listType: 'user_uploads', list: 'youtube' } );
</script>

Or if someone could provide working example with the original loadplaylist line that would be great, and I can work on the other details I need on my own from there.

-YouTube API Newbie

Upvotes: 2

Views: 11206

Answers (2)

Sahil Kashyap
Sahil Kashyap

Reputation: 359

it has the feature

-make playlist of video id. 
-to play next and previous.
-play,pause and stop

https://jsfiddle.net/Physcocybernatics/6dkw8e7r/

<div id="player"></div>
<div class="buttons">
        <button class="button" id="play-button">PLAY</button>
        <button class="button" id="pause-button">PAUSE</button>

        <button class="button" id="previous">previous</button>
        <button class="button" id="next">Next</button>
        <button class="button" id="stop-button">STOP</button>
    </div>


/**
 * Put your video IDs in this array
 */
var videoIDs = [
  'kJQP7kiw5Fk',
  '2cv2ueYnKjg',
  'nfs8NYg7yQM',
  'ClU3fctbGls'
];

var player, currentVideoId = 0;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    playerVars: {
      controls: 1,
      showinfo: 0,
      rel: 0,
      showsearch: 0,
      iv_load_policy: 3
    },
    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]);
    }
  }
}

Upvotes: 0

Isara Rungvitayakul
Isara Rungvitayakul

Reputation: 508

First of all , I suggest you to use IFRAME embed style, because it work on both desktop and mobile (iOS,Android,BB,Windows, very nice). The sample code is at Youtube IFRAME embed . This one contain the html code for you to get started.

Let's get into your question.

1 Let assume you get youtube player as 

player = new YT.Player('player', {
      height: '390',
      width: '640',
        videoId: 'u1zgFlCw8Aw',
      events: {
        'onReady': onPlayerReady
      }
});

don't care with videoId. just insert any valid youtube video's ID.

notice that we register 'onReady': onPlayerReady

2 Load your playlist into the player using onPlayerReady

function onPlayerReady(event) { 
    event.target.loadPlaylist({list: "UUPW9TMt0le6orPKdDwLR93w", index: 1, startSeconds: 10,suggestedQuality: "small"});
}

You can read more on Youtube JSAPI reference Hope this work on you. ^^.

UPDATE

you can also specify the playlist in playerVars object.

function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
        videoId: 'u1zgFlCw8Aw',
        playerVars: {
          listType:'playlist',
          list: 'UUPW9TMt0le6orPKdDwLR93w'
        },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

Upvotes: 5

Related Questions