多个youtube视频放在页面上-活动都准备好了吗？
多个youtube视频放在页面上-活动都准备好了吗？
提问于 2018-06-08 03:26:42
当页面上的所有视频都处于"ON READY“状态时，有没有可能获得信息？(我需要知道这些信息，之后我会做另一个JS事件)。
所有关于SO / Google搜索的例子都只有一个视频。我在文档中没有找到任何东西。
谢谢。
回答 1
Stack Overflow用户
发布于 2018-06-08 03:53:35
您可以使用setter和getters创建类似于变量侦听器(在本例中是计数器侦听器)的内容。然后，您可以指定页面上的视频数量，并在每次加载视频时增加计数器。
每次加载视频时，计数器都会增加，您可以检查计数器是否等于视频总数。当计数器等于该数字时，则意味着所有视频都已加载，您可以执行任何您想要的操作。
下面代码片段中的函数videoHasBeenLoaded()应该用作on ready state视频侦听器的回调(这里我使用setTimout来模拟该事件)。
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);
没有使用全局计数器的getters和setters的ES5版本。
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);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50748844
复制相关文章
相似问题