CODEWITHSUNDEEP
jqueryhtmlcssjquery-uiyoutube
mistkaes
mistkaes

Reputation: 399

jQuery UI Slider lags when sliding

I have this video synced up with this jQuery UI Slider, it seems to lag behind and not feel smooth when scrubbing, any help?

DEMO: http://codepen.io/mistkaes/pen/MwONzK?editors=001

jQuery: 

String.prototype.toHHMMSS = function() {
  var sec_num = parseInt(this, 10);
  var hours = Math.floor(sec_num / 3600);
  var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
  var seconds = sec_num - (hours * 3600) - (minutes * 60);

  if (hours < 10) {
    hours = "0" + hours;
  }

  if (minutes < 10) {
    minutes = "0" + minutes;
  } 

  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  var time = hours + ":" + minutes + ":" + seconds;
  time = time.replace(/^0+/, '');
  time = time.replace(/^[^\w\s]/gi, '');
  return time;
}

$("#range").slider({
  range: "min",
   start: function(event, ui) { player.pauseVideo(); },
  stop: function(event, ui) { player.playVideo(); },
  slide: function(event, ui) {   
  //  player.pauseVideo();
    player.seekTo(ui.value,true);   
   return false;
  }
});

$("#volume-range").slider({
  range: "min",
  value: 50,
});

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '282',
    width: '502',
    videoId: 'QExOaGT_ids',
    playerVars: {
      'controls': 0,
      'showinfo': 0,
      'iv_load_policy': 3,
      'rel': 0,
    },
    events: {
      'onReady': onPlayerReady,
    }
  });
}

setInterval(function() {
  $("#content").text("video_time: " + player.getCurrentTime().toString().toHHMMSS());

  $("#range").slider("value", player.getCurrentTime());
  $("#range").slider("option", "max", player.getDuration());  
}, 1);

setInterval(function() {
    // VOLUME CONTROLS
  $("#volume-amount").text("volume: " + player.getVolume() + "%");
  player.setVolume($("#volume-range").slider("value"));
}, 1);

function onPlayerReady(event) {
  // auto-play video
  event.target.playVideo();
}

$(document).ready(function() {
  // READY
});

As always, thanks for helping out!

Upvotes: 1

Views: 1106

Answers (1)

atomSmasher
atomSmasher

Reputation: 1465

You are trying to update the frames on every slide event (overload)... just do it when the slide is complete YT Documentation Also, set your range to true.

$("#range").slider({
  range: true,
  start: function(event, ui) { player.pauseVideo();},
  stop: function(event, ui) { player.seekTo(ui.value,true); player.playVideo(); }
});

If you want the video to update as the slider moves you might be able to reduce some of the load by requesting data at certain intervals...

$("#range").slider({
  range: true,
  start: function(event, ui) { player.pauseVideo();},
  stop: function(event, ui) {player.playVideo(); },
  slide: function(event, ui) {
   if (ui.value % 5 == 0)
   {
     player.seekTo(ui.value,true);
   }
  }
});

Upvotes: 1

Related Questions