api - 指定时间的 Youtube API 事件

Question

当视频到达指定时间时，是否可以通过 YouTube API 触发事件？例如，当视频达到 20 秒时。触发事件。

谢谢，
毛罗

Answer 1

不知道你是否仍然需要这个问题的答案（因为我在 4 个月后找到了它），但这是我如何使用 youtube 的 iframe embed 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 来使间隔停止并在播放/暂停时自行启动检查播放和暂停的功能。您只需将 updateTime() 函数与 onPlayerReady 分开，并在正确的事件处理程序中 战略性地调用timeupdater = setInterval(updateTime, 100);和。有关在YouTube 中使用活动的更多信息，请参阅此处。clearInterval(timeupdater);

Answer 2

我想你可以看看popcorn.js。这是一个有趣的 mozilla 项目，它似乎可以解决您的问题。

Answer 3

不确定是否有人同意这里，但我可能更喜欢使用 setTimeout() 而不是 setInterval() 因为它避免使用事件侦听器，例如：

function checkTime(){
    setTimeout(function(){
        videotime = getVideoTime();
        if(videotime !== requiredTime) {
             checkTime();//Recursive call.
        }else{
            //run stuff you want to at a particular time.
            //do not call checkTime() again.
        }
    },100);
}

它是一个基本的伪代码，但希望能传达这个想法。