Question

所以，我已经掌握了基础知识......但我正在尝试与我当前的代码尝试做的相反。目前，当您移动YOUTUBE UI SLIDER时，它将改变自定义UI SLIDER的时间，我试图让它成为另一种方式，当您更改UI SLIDER时，它将更改YOUTUBE UI滑块。

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 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

1 个答案: