jQuery用戶界面滑塊滑動時滑動

Question

我有這個視頻與這個jQuery用戶界面滑塊同步了，它似乎落後，並不感覺平滑時，洗滌，任何幫助？

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 
}); 

一如既往，感謝您的協助！

Answer 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); 
    } 
    } 
});