检测 jQuery UI 滑块何时移动?
Detect when the jQuery UI slider is being moved?
我有这个自定义视频时间 UI 滑块可以在擦除时更改 YouTube 视频的时间。我的问题是,当用户移动滑块时尝试加载视频时,它会导致手柄猛拉并翻转。
我想知道的是,我是否可以做到这一点,以便当用户移动手柄时,它不会尝试加载视频,相反,一旦他们松开滑块上的鼠标,它就会更新。
演示: http://codepen.io/mistkaes/pen/RPGzbX?editors=001
jQuery:
String.prototype.toHHMMSS = 函数() {
var sec_num = parseInt(this, 10);
var hours = Math.floor(sec_num / 3600);
var 分钟 = Math.floor((sec_num - (小时 * 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
});
一如既往,感谢您的帮助!
尝试添加一个 return:false;关于幻灯片功能。像这样:
$("#range").slider({
range: "min",
slide: function(event, ui) {
player.seekTo(ui.value,true);
return false;
}
});
您可以使用 3 个事件:
- 开始 (Start-Sliding) -> Stop Player
- 结束(结束滑动)-> 开始播放器
- 滑动(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;
}
});
我有这个自定义视频时间 UI 滑块可以在擦除时更改 YouTube 视频的时间。我的问题是,当用户移动滑块时尝试加载视频时,它会导致手柄猛拉并翻转。 我想知道的是,我是否可以做到这一点,以便当用户移动手柄时,它不会尝试加载视频,相反,一旦他们松开滑块上的鼠标,它就会更新。
演示: http://codepen.io/mistkaes/pen/RPGzbX?editors=001
jQuery: String.prototype.toHHMMSS = 函数() { var sec_num = parseInt(this, 10); var hours = Math.floor(sec_num / 3600); var 分钟 = Math.floor((sec_num - (小时 * 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
});
一如既往,感谢您的帮助!
尝试添加一个 return:false;关于幻灯片功能。像这样:
$("#range").slider({
range: "min",
slide: function(event, ui) {
player.seekTo(ui.value,true);
return false;
}
});
您可以使用 3 个事件:
- 开始 (Start-Sliding) -> Stop Player
- 结束(结束滑动)-> 开始播放器
- 滑动(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;
}
});