jquery - 使用 “range”输入滑块更改YouTube视频的时间？

对于演练，我尝试使用范围滑块更改视频的时间-因此，当您上下移动滑块时，它将更改视频的时间。我正在寻找使用jQuery的方法。

演示:
http://codepen.io/mistkaes/pen/rVMPMj

-和-

CODE:

<iframe width="502" height="282" src="https://www.youtube.com/embed/x9B2FmRR9ds?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

<br />

<input type="range" id="time-slider" value="0" style="width: 500px" />

与往常一样，感谢您的帮助!

最佳答案

这是相关的笔:http://codepen.io/udnaan/pen/ZGpwKB

HTML:

<div id="player"></div>
<br/>
<input type="range" id="time-slider" value="0" style="width: 500px" />

JS:

  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: 'x9B2FmRR9ds',
      events: {
        'onReady': onPlayerReady,
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
    $('#time-slider').attr('max', player.getDuration())
    $('#time-slider').change(function(evt){
      console.log($(evt.currentTarget).val());
      player.seekTo($(evt.currentTarget).val())

    })
  }

还可以看看youtube api:https://developers.google.com/youtube/iframe_api_reference#seekTo