mistkaes mistkaes - 1 month ago 10
jQuery Question

Make YouTube video time change with jQuery UI-Slider

So, I've got the basics... but I'm trying to do the opposite of what my current code is trying to do. At the moment, when you move the YOUTUBE UI SLIDER it'll change the time of the custom UI SLIDER, I'm trying to have it be the other way around where, when you change the UI SLIDER it'll change the YOUTUBE UI SLIDER.

CODE:
http://codepen.io/mistkaes/pen/RPGzbX?editors=001

jQUERY:

$("#range").slider({
range: "min",
});

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: '390',
width: '640',
videoId: 'YqeW9_5kURI',
events: {
'onReady': onPlayerReady,
}
});
}

setInterval(function() {
$("#content").text("video_time: " + player.getCurrentTime());

$("#range").slider("value", player.getCurrentTime());
$("#range").slider("option", "max", player.getDuration());
}, 100);

function onPlayerReady(event) {
event.target.playVideo();
}

Answer

From jQuery slider API , to get the current slider value on sliding use the following (for example ):

$( ".selector" ).slider({
  slide: function( event, ui ) {console.log(ui.value)}
});

Once you have the ui.value , pass it to youtube player api

player.seekTo(ui.value);

so whole code will be :

$("#range").slider({
  range: "min",

 slide: function( event, ui ) {player.seekTo(ui.value);}

});