问题 指定时间内的Youtube API事件

不确定你是否仍然需要一个答案（因为我在4个月后发现它）但是这是我用youtube的iframe嵌入api完成这个的方法。它的丑陋之处在于它需要一个setInterval，但YouTube API中确实没有任何“timeupdate”事件（至少在iframe API中没有），所以你必须通过每次检查视频时间来伪造它很经常。它似乎运行得很好。

假设您想要启动播放器 如图所示 使用YT.Player（），你想实现自己的 onProgress() 每当视频时间改变时调用的函数：

在HTML中：

<div id="myPlayer"></div>

在JS中：

// first, load the YouTube Iframe API:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// some variables (global here, but they don't have to be)
var player;
var videoId = 'SomeYoutubeIdHere';
var videotime = 0;
var timeupdater = null;

// load your player when the API becomes ready
function onYoutubeIframeAPIReady() {
  player = new YT.Player('myPlayer', {
    width: '640',
    height: '390',
    videoId: videoId,
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when the player is ready, start checking the current time every 100 ms.
function onPlayerReady() {
  function updateTime() {
    var oldTime = videotime;
    if(player && player.getCurrentTime) {
      videotime = player.getCurrentTime();
    }
    if(videotime !== oldTime) {
      onProgress(videotime);
    }
  }
  timeupdater = setInterval(updateTime, 100);
}

// when the time changes, this will be called.
function onProgress(currentTime) {
  if(currentTime > 20) {
    console.log("the video reached 20 seconds!");
  }
}

这有点草率，需要一些全局变量，但你可以很容易地将它重构为一个闭包和/或使间隔停止并在播放/暂停时开始，同时在初始化播放器时包括onStateChange事件，并编写onPlayerStateChange检查播放和暂停的功能。您只需要从onPlayerReady中分离updateTime（）函数，然后进行策略调用 timeupdater = setInterval(updateTime, 100); 和 clearInterval(timeupdater); 在正确的事件处理程序中。 看这里 有关在YouTube上使用活动的更多信息。

不确定你是否仍然需要一个答案（因为我在4个月后发现它）但是这是我用youtube的iframe嵌入api完成这个的方法。它的丑陋之处在于它需要一个setInterval，但YouTube API中确实没有任何“timeupdate”事件（至少在iframe API中没有），所以你必须通过每次检查视频时间来伪造它很经常。它似乎运行得很好。

假设您想要启动播放器 如图所示 使用YT.Player（），你想实现自己的 onProgress() 每当视频时间改变时调用的函数：

在HTML中：

<div id="myPlayer"></div>

在JS中：

// first, load the YouTube Iframe API:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// some variables (global here, but they don't have to be)
var player;
var videoId = 'SomeYoutubeIdHere';
var videotime = 0;
var timeupdater = null;

// load your player when the API becomes ready
function onYoutubeIframeAPIReady() {
  player = new YT.Player('myPlayer', {
    width: '640',
    height: '390',
    videoId: videoId,
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when the player is ready, start checking the current time every 100 ms.
function onPlayerReady() {
  function updateTime() {
    var oldTime = videotime;
    if(player && player.getCurrentTime) {
      videotime = player.getCurrentTime();
    }
    if(videotime !== oldTime) {
      onProgress(videotime);
    }
  }
  timeupdater = setInterval(updateTime, 100);
}

// when the time changes, this will be called.
function onProgress(currentTime) {
  if(currentTime > 20) {
    console.log("the video reached 20 seconds!");
  }
}

这有点草率，需要一些全局变量，但你可以很容易地将它重构为一个闭包和/或使间隔停止并在播放/暂停时开始，同时在初始化播放器时包括onStateChange事件，并编写onPlayerStateChange检查播放和暂停的功能。您只需要从onPlayerReady中分离updateTime（）函数，然后进行策略调用 timeupdater = setInterval(updateTime, 100); 和 clearInterval(timeupdater); 在正确的事件处理程序中。 看这里 有关在YouTube上使用活动的更多信息。