jquery - 检测 jQuery UI slider 何时移动？

Question

我有这个自定义视频时间 UI slider ，可以在拖动时更改 YouTube 视频的时间。我的问题是，当用户移动 slider 时尝试加载视频时，它会导致 handle 猛烈转动并翻转。 我想知道的是，我是否可以做到这一点，以便当用户移动 handle 时，它不会尝试加载视频，而是一旦他们在 slider 上放开鼠标，它就会更新。

<小时/>

演示: http://codepen.io/mistkaes/pen/RPGzbX?editors=001

jQuery: String.prototype.toHHMMSS = function() { var sec_num = parseInt(this, 10); var 小时 = Math.floor(sec_num/3600); var 分钟 = Math.floor((sec_num - (小时 * 3600))/60); var 秒 = sec_num - (小时 * 3600) - (分钟 * 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",
  slide: function(event, ui) {player.seekTo(ui.value);}
});

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

您可以使用 3 个事件:
- 开始(开始-滑动)-> 停止播放器
- 结束(结束滑动)-> 启动播放器
- 滑动(滑动)-> 移动玩家位置

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

演示:http://codepen.io/anon/pen/EjwMGV