使用输入 "range" 滑块更改 YouTube 视频的时间？

Question

对于运行-through，我尝试使用范围滑块更改视频的时间 - 因此当您上下移动滑块时，它会更改视频的时间。我希望用 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

使用输入 "range" 滑块更改 YouTube 视频的时间？

Change time of YouTube video using input "range" slider?

html

youtube

jquery