CODEWITHSUNDEEP
javascripthtmlyoutube-api
Valip
Valip

Reputation: 4650

YouTube API starts two videos in the same time

I have two videos that are controlled with YouTube api, everything works fine excepting that when the page loads the first video starts (this is normal) but on the same time you can hear the sound of the second video (this must start after first video ends or is manually closed) which can be better heard if you pause the first video...does anyone has a solution for this?

I think that this happens because both video are calling the onReady event.

It is a must to start the second video automatically when the first one ended or was closed.

<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);
      event.target.stopVideo();
      $('.second-video').fadeIn();
    });
  }

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

</script>

http://jsfiddle.net/yjrx8uyz/

Upvotes: 1

Views: 141

Answers (1)

Amitd
Amitd

Reputation: 4859

I updated your fiddle http://jsfiddle.net/yjrx8uyz/3/

Basically you have to check which player has fired the ready event and closing event.

if(event.target == player)

Ref : How to detect when a youtube video finishes playing?

Upvotes: 2

Related Questions