使用 jQuery UI-Slider 更改 YouTube 视频时间

Question

所以，我掌握了基础知识...但我正在尝试做与我当前代码正在尝试做的相反的事情。目前，当您移动 YOUTUBE UI SLIDER 时，它会更改自定义 UI SLIDER 的时间，当您更改 UI SLIDER 它会改变 YOUTUBE UI SLIDER.

代码： 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 1

从 jQuery 滑块 API 获取滑动时的当前滑块值，使用以下命令（例如）：

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

获得 ui.value 后，将其传递给 youtube 播放器 api

player.seekTo(ui.value);

所以整个代码将是：

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

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

});

使用 jQuery UI-Slider 更改 YouTube 视频时间

Make YouTube video time change with jQuery UI-Slider

html

jquery

youtube-api