How can I play two Youtube videos without linking to a playlist?

I'm very new to Javascript. I'm embedding a youtube iframe here: http://www.heartlandpokertour.com/indexbeta.php

Usin开发者_高级运维g this documentation: http://code.google.com/apis/youtube/iframe_api_reference.html

I would like a second video to play, looped, after the first one is finished. I'm unable to set specific video parameters if I try and link/set the video id to a Youtube playlist.

I'm assuming I need to setup an event listener and function to trigger when YT.PlayerState.ENDED (or 0) is broadcast, but NO IDEA how to do this.

Update: Here is the current code I'm using for the player:

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "http://www.youtube.com/player_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 onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '258',
      width: '406',
      videoId: 'MsTQNZmq5Pk',
      playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
      events: {
        'onStateChange': onPlayerStateChange,
      }
    });
  }

  // 4. The API will call this function when the video player is ready.     
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
        player.stopVideo();
        player.videoId = 'c5dTlLk5_x8';
        player.playVideo();
        }
    }


</script>

---

In the first code listing on the api website, this event might help you:

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }

You could change it to something like this (not tested I'm afraid):

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.stopVideo();
      player.videoId = 'some id';
      player.playVideo();
    }
  }

This would be the most logical in my opinion, but then again I'm not sure whether different videos can be played within one player instance. I've never come across your scenario I'm afraid.

---

Edit: You could try creating a new instance of the player. So basically you'd just create a new player, which will play the second video:

 function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.stopVideo();

      player = new YT.Player('player', {
         height: '258',
         width: '406',
         videoId: 'some id',
         playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
         events: {
           //'onStateChange': onPlayerStateChange, // not add this line because it would again create a new player after the second has stopped I guess!
         }
      });

      player.playVideo();
    }
  }

---

I have got this working on my site, first you can stop the current video playing, then load in a new video with the loadVideoById() function from the Youtube API

 function swapVideo() {     
    player.stopVideo();
    player.loadVideoById(youtube_id);
 }