Youtube - onStateChange working on one video but not another

Question

The same code behaves differently, when you change the YouTube video ID.

The issue is that when you pull the progress slider, it fires the onStateChange event on one video, but not the other. Check the two examples below, and try to pull the timeslider on both examples and watch your console.log.

Why does only one of the videos react to onStateChange when you pull the time slider?

Both videos react fine to the play/pause button, but not the time slider... only one is working.

Am I missing something? Any help really appreciated

Youtube code 1 (working): (http://jsfiddle.net/2t9omgwm/)

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<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.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      iv_load_policy: 3,
      showinfo:0,
      //videoId: 'Fj73JF_bhjc',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    //event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
      console.log('state changed');
      //player.seekTo(0, true);
    if (event.data == YT.PlayerState.PLAYING && !done) {
      done = true;
    }
  }

</script>

And with another video its not working: (http://jsfiddle.net/ctgomt7t/)

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<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.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: '0Bmhjf0rKe8',
      iv_load_policy: 3,
      showinfo:0,
      //videoId: 'Fj73JF_bhjc',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    //event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
      console.log('state changed');
      //player.seekTo(0, true);
    if (event.data == YT.PlayerState.PLAYING && !done) {
      done = true;
    }
  }
</script>

`

Answer 1

The onPlayerStateChange event is fired for one of the following reasons:

-1 = unstarted

0 = ended

1 = playing

2 = paused

3 = buffering

5 = video cued

I think what you are seeing on the longer video is the event firing for (3) buffering when you move the slider. However, on the shorter video there is no buffering so you don't see the event.

You can see this by changing your code to read console.log('state changed : ' + event.data).