检测jQuery UI滑块何时被移动？ [英] Detect when the jQuery UI slider is being moved?

问题描述

我有这个自订影片时间的使用者介面滑杆，可以变更清除时YouTube影片的时间。我的问题是，当视频尝试加载时，用户正在移动滑块，它会导致手柄抖动和翻转。
我想知道的是，如果我能做到这样，当用户移动的句柄，它不会尝试加载视频，而只是更新一旦他们放开他们的鼠标 / mistkaes / pen / RPGzbX？editors = 001rel =nofollow> 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 - （hours * 3600） - （minutes * 60）;

  if（hours< 10）{
 hours =0+ hours; 
} 
 
 if（minutes< 10）{
 minutes =0+ minutes; 
} 
 
 if（秒<10）{
 seconds =0+秒; 
} 
 
 var time = hours +：+分钟+：+秒; 
 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，
}，
事件：{
'onReady'：onPlayerReady，
} 
} 
} 
 
 setInterval（function（）{
 $（＃content）。text（video_time：+ player.getCurrentTime（）。toString（）.HHMMSS ）; 
 
 $（＃range）。slider（value，player.getCurrentTime（））; 
 $（＃range max，player.getDuration（））; 
 
}，1）; 
 
 setInterval（function（）{
 // VOLUME CONTROLS 
 $（＃volume-amount）。text（volume：+ player.getVolume ％）; 
 player.setVolume（$（＃volume-range）。slider（value））; 
}，1）; 
 
 function onPlayerReady（event）{
 //自动播放视频
 event.target.playVideo（）; 
} 
 
 $（document）.ready（function（）{
 // READY 
}）; 
  

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

解决方案

您可以使用3个事件：

- 开始（开始 - 滑动） - >停止播放器

- 结束 - >开始播放器

- 幻灯片（滑动） - >移动玩家位置

  $ （#range）。slider（{
 range：min，
 start：function（event，ui）{
 player.pauseVideo（）; 
}，
 stop：function（event，ui）{
 player.playVideo（）; 
}，
幻灯片：function（event，ui）{
 player.seekTo（ui .value，true）; 
 return false; 
} 
}）; 
  

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

I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to find out is if can I make it so that when the user is moving the handle it won't try to load the video, instead it will just update once they let go of their mouse on the slider.

---

DEMO: 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 - (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",
  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
}); 

As always, thanks for helping!

解决方案

You can use 3-Events:
- Start (Start-Sliding) -> Stop Player
- End (End-Sliding) -> Start Player
- Slide (Sliding) -> Move Player-Position

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

Demo: http://codepen.io/anon/pen/EjwMGV

这篇关于检测jQuery UI滑块何时被移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！