检测何时移动 jQuery UI 滑块？

Question

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

---

演示： http://codepen.io/mistkaes/pen/RPGzbX?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 - (小时 * 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 事件：
- 开始（开始-滑动）-> 停止播放器
- 结束（结束滑动）-> 开始播放器
- 滑动（Sliding）-> 移动玩家位置

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

Answer 2

尝试添加一个 return:false;关于幻灯片功能。像这样：

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