指定时间的 Youtube API 事件 [英] Youtube API event on a specified time

问题描述

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

Is it possible through the YouTube API to fire an event when the video reaches a specified time? e.g. when the video reaches 20 sec. fire the event.

谢谢，
毛罗

推荐答案

不确定您是否还需要对此的答案(因为我在 4 个月后才找到答案)，但这是我使用 youtube 的 iframe 嵌入 api 完成此任务的方法.它的丑陋之处在于它需要一个 setInterval，但在 YouTube API 中确实没有任何类型的timeupdate"事件(至少在 iframe API 中没有)，所以你必须通过检查视频时间来伪造它很经常.它似乎运行得很好.

not sure if you still need an answer to this (as I'm finding it 4 months later) but here's how I accomplished this with youtube's iframe embed api. It's ugly in that it requires a setInterval, but there really isn't any kind of "timeupdate" event in the YouTube API (at least not in the iframe API), so you have to kind of fake it by checking the video time every so often. It seems to run just fine.

假设您想使用 YT.Player 启动您的播放器如下所示()，并且您希望实现自己的 onProgress() 函数，该函数在视频时间更改时调用:

Let's say you want to start up your player as shown here with YT.Player(), and you want to implement your own onProgress() function that is called whenever the video time changes:

在 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); 和 clearInterval(timeupdater);事件处理程序.请参阅此处，详细了解如何在 YouTube 上使用事件.

It's a little sloppy, requiring a few global variables, but you could easily refactor it into a closure and/or make the interval stop and start itself on play/pause by also including the onStateChange event when you initialize the player, and writing an onPlayerStateChange function that checks for play and pause. You'd just need to seperate the updateTime() function from onPlayerReady, and strategically call timeupdater = setInterval(updateTime, 100); and clearInterval(timeupdater); in the right event handlers. See here for more on using events with YouTube.

这篇关于指定时间的 Youtube API 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！