jQuery UI Slider 滑动时滞后

Question

我已将此视频与此 jQuery UI Slider 同步，它似乎滞后并且在擦洗时感觉不流畅，有什么帮助吗？

演示: 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
}); 

一如既往，感谢您的帮助!

Answer 1

您正在尝试在每个幻灯片事件(过载)上更新帧...在幻灯片完成时执行此操作 YT Documentation另外，将范围设置为 true。

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

如果您希望视频随着 slider 的移动而更新，您可以通过在特定时间间隔请求数据来减少一些负载...

$("#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);
   }
  }
});