Why onClick next video function, using the YouTube JavaScript Player API, the quality drop down to default?

Question

I'm on CodeIgniter and I have this issue, using the next_video API function, onClick of the button the new video has a low quality than previous, so basically the first video is always at my suggestion quality and next always at default quality.

On my template I have this div:

 <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

This is my custom.js:

function loadNewVideo(id, startSeconds,quality,ads) {

    console.log(ytplayer);
  if (ytplayer) {

     $("#current progress-bar").width("0%");   
     if(ads != '')  
     {
        tempVideo   = id;
        id          = ads;
        console.log(ads);
     }
    ytplayer.loadVideoById(id, parseInt(startSeconds),'hd720');

    if(is_mobile)
        {

            $("#videoPlayer").removeClass('active');
            $("#thumbnail").addClass('hidePlayer');                     

        }

  }
  else
  {         
        ytplayer = new YT.Player('ytapiplayer', {
              height: '425',
              width: '356',
              videoId: id,
              suggestedQuality: 'hd720',
              playerVars: {'controls': youtube_control,'autoplay':1 },
              events: {
                'onReady': onYouTubePlayerReady
              }
        }); 

        if(start_youtube =="1")
        {
            $("#videoPlayer").addClass('active');
            $("#thumbnail").removeClass('hidePlayer');          
            $("#amazon").hide();
        }

        if(is_mobile)
        {

            $("#videoPlayer").addClass('active');
            $("#thumbnail").removeClass('hidePlayer');
            $('#thumbnailx ,.info-thumb').popover('show');
            setTimeout(function() {$('#thumbnailx ,.info-thumb').popover('hide');}, 5000);

        }

  }
}

and this is my header:

    <script src="//www.youtube.com/iframe_api"></script> 

    <script type="text/javascript">
    var base_url              = '<?php echo base_url(); ?>';
    var popup                 = '<?php echo $this->config->item("popup"); ?>';
    var is_mobile             = '<?php echo $this->agent->is_mobile(); ?>';
    var title                 = "<?php echo $this->config->item("title"); ?>"; 
    var label_loading         = "<?php echo ___('label_loading'); ?>";
    var extend                = "<?php echo $this->config->item('use_database'); ?>";
    var start_youtube         = "0";
    var label_loading_playlist= "<?php echo ___('label_loading_playlist'); ?>";
    var error_max             = "<?php echo ___('error_playlist_max'); ?>";
    var hide_ads_registered   = "<?php echo $this->config->item('hide_ads_registered'); ?>";
    var is_logged             = "<?php echo is_logged(); ?>";
    var youtube_control       = "<?php echo $this->config->item('youtube_controls'); ?>";
    var youtube_quality       = "<?php echo $this->config->item('youtube_quality'); ?>";
    </script>

I become crazy as I cannot find the problem, I don't have errors on my console.

How could I fix it?

Could you add a demo and/or some additional code to see the how the videos are loaded? — Alvaro Montoro, Apr 14 '15 at 12:15
Also, your issue could be related to this one: http://stackoverflow.com/questions/8802498/youtube-iframe-api-setplaybackquality-or-suggestedquality-not-working/ — Alvaro Montoro, Apr 14 '15 at 12:22
@AlvaroMontoro finally I found the solution in your link! Thank you so much ;) — NineCattoRules, Apr 14 '15 at 15:35

score 0 · Accepted Answer · edited May 23 '17 at 12:33

Thanks to the user Alvaro Montoro, I found here the solution.

I added this function to the custom.js:

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        event.target.setPlaybackQuality('hd720');  // <-- WORKS!
    }
}

in the same JavaScript I edit the ytplayer:

ytplayer = new YT.Player('ytapiplayer', {
              height: '100%',
              width: '100%',
              videoId: id,
              suggestedQuality: 'hd720',
              playerVars: {'controls': youtube_control,'autoplay':1 },
              events: {
                'onReady': onYouTubePlayerReady,
                'onStateChange': onPlayerStateChange
              }
        });

This will work ONLY if the player size is at least 720px in height.

Thanks to ALL of YOU

Why onClick next video function, using the YouTube JavaScript Player API, the quality drop down to default?

1 Answers1

Linked