Question

当页面上的所有视频都处于“开启状态”时，是否有机会获取信息？（我需要知道这些信息，之后我会再做一些JS事件）。

SO / Google搜索的所有示例都包含一个视频。我没有在文档中找到任何内容。

感谢。

Answer 1

您可以使用setter和getter创建类似于变量侦听器（在本例中为计数器侦听器）的内容。然后，您可以指定页面上的视频数量，并在每次加载视频时增加计数器。

每次加载视频时，计数器都会增加，您可以检查计数器是否等于视频总数。当计数器等于该数字时，则意味着所有视频都已加载，您可以执行任何所需的操作。

下面代码段中的功能videoHasBeenLoaded()应该用作on ready state视频监听器的回调（这里我使用setTimout来模拟该事件）。

＆＃13;

function videoHasBeenLoaded() {
  loaded.counter++;
  console.log(`video has been loaded (no. of loaded videos: ${loaded.counter})`);
}

const loaded = {
  _counter: 0,
  listener: function() {},
  set counter(val) {
    this._counter = val;
    this.listener(val);
  },
  get counter() {
    return this._counter;
  },
  registerListener: function(listener) {
    this.listener = listener;
  }
}

loaded.registerListener(function(val) {
  const numberOfVideos = 3;
  if (loaded.counter === numberOfVideos) {
    alert(`all (${numberOfVideos}) videos have been loaded`);
    // you code goes here
  }
});

setTimeout(videoHasBeenLoaded, 1000);
setTimeout(videoHasBeenLoaded, 2000);
setTimeout(videoHasBeenLoaded, 3000);

＆＃13;

<小时/> 没有使用全局计数器的getter和setter的ES5版本。

＆＃13;

var counter = 0;

function videoHasBeenLoaded() {
  counter++;
  console.log(`video has been loaded`);
  allVideosReadyCallback(counter);
}

function allVideosReadyCallback(counter) {
  var numberOfVideos = 3;
  if (counter === numberOfVideos) {
    alert(`all videos have been loaded`);
    // you code goes here
  }
}

setTimeout(videoHasBeenLoaded, 1000);
setTimeout(videoHasBeenLoaded, 2000);
setTimeout(videoHasBeenLoaded, 3000);

＆＃13;

页面上有多个YouTube视频 - 活动全部准备好了吗？

1 个答案: