使用 jQuery UI-Slider 改变 YouTube 视频时间答案

【问题标题】：Make YouTube video time change with jQuery UI-Slider使用 jQuery UI-Slider 改变 YouTube 视频时间
【发布时间】：2015-05-24 07:38:09
【问题描述】：

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

代码： 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();
}

【问题讨论】：

标签： jquery html youtube-api

【解决方案1】：

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

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

获得 ui.value 后，将其传递给 youtube player api

player.seekTo(ui.value);

所以整个代码将是：

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

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

});

【讨论】：