jquery - 使用输入 "range" slider 更改 YouTube 视频的时间？

Question

对于运行，我正在尝试使用范围 slider 更改视频的时间 - 因此，当您上下移动 slider 时，它会更改视频的时间。我希望用 jQuery 来做这件事。

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

-和-

代码:

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

一如既往，感谢您帮助我!

Answer 1

这是相关的笔: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