我将此视频与此jQuery UI Slider同步,它似乎落后于擦洗时感觉不顺畅,有什么帮助吗?
DEMO: 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
});
一如既往,感谢您的帮助!
答案 0 :(得分: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(); }
});
如果您希望视频在滑块移动时更新,您可以通过以特定间隔请求数据来减少一些负载......
$("#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);
}
}
});