CODEWITHSUNDEEP
javascripthtmlyoutube-api
Valip
Valip

Reputation: 4610

Make YouTube api automatically start another video when first video ended

I need to make a video page for my website which must contain a video from youtube (https://www.youtube.com/watch?v=bWPMSSsVdPk) and after this video ended I need to automatically display a second video (https://www.youtube.com/watch?v=0afZj1G0BIE) and the div with class content

This is my code so far:

<style>
  .content {
    display: none;
  }
</style>

<div class="content">
  <button>Show this button after first video ends</button>
</div>

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>
<script>
  // create youtube player
  var player;
  function onYouTubePlayerAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'bWPMSSsVdPk',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
  }
  // autoplay video
  function onPlayerReady(event) {
      event.target.playVideo();
  }
  // when video ends
  function onPlayerStateChange(event) {        
      if(event.data === 0) {          
          alert('done');
      }
  }
</script>

Upvotes: 3

Views: 1320

Answers (3)

Szuturon
Szuturon

Reputation: 971

function onPlayerStateChange(event) {        
      if(event.data === 0) {          
          event.target.loadVideoById("0afZj1G0BIE");
      }
  }

That'll play your next video right after your first. However that also calls playVideo() which will be an issue for anyone watching on an Apple mobile device. Consider using cueVideoById() instead.

Upvotes: 0

Valip
Valip

Reputation: 4610

I've found a solution for this but it seems that the sound of the second video is also playing in the same time with the first video...

<style>
    .second-video {
        display: none;
    }
</style>

<div class="video-site">
  <div class="first-video">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <div id="player"></div>
  </div>
  <div class="second-video">
    <div id="player2"></div>
  </div>
</div>

<script src="http://www.youtube.com/player_api"></script>
<script>
  // create youtube player
  var player;
  var player2;

  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'qCDxEif_9js',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
    player2 = new YT.Player('player2', {
      height: '390',
      width: '640',
      videoId: '43jHG-yH9Gc',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // autoplay video
  function onPlayerReady(event) {
    event.target.playVideo();
    $('.close').click(function(){
      $('.first-video').hide(3000);
      $('.second-video').fadeIn();
    });
  }
  // when video ends
  function onPlayerStateChange(event) {
    if(event.data === 0) {
      $('.first-video').hide(3000);
      $('.second-video').fadeIn();
    }
  }

</script>

Upvotes: 1

AniV
AniV

Reputation: 4037

There is no direct way as to how one can do this with the available set of parameters that a Youtube iframe Player API has. But you can try doing this.

  • Create a Playlist of the video's you want to play consecutively in the same order.
  • In the REST API call set the listType parameter as playlist.

  • Retrieve the playlistID of that particular playlist.

    http://www.youtube.com/embed?listType=playlist&list=PLPLAYLISTID

  • Finally, set the autoplay parameter to 1 so that the video's in the playlist play automatically.

Upvotes: 0

Related Questions