当视频达到指定时间时,是否可以通过YouTube API触发事件?例如当视频达到20秒。解雇事件。
谢谢,
莫罗
答案 0 :(得分:14)
不确定你是否还需要一个答案(因为我在4个月后发现它)但是这是我用youtube的iframe嵌入api完成这个的方法。这很难看,因为它需要一个setInterval,但YouTube API中确实没有任何“timeupdate”事件(至少在iframe API中没有),所以你必须通过检查每个视频时间来伪造它很经常。它看起来运行得很好。
假设您想要使用YT.Player()启动播放器as shown here,并且希望实现自己的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);
。 See here了解有关在YouTube上使用活动的更多信息。
答案 1 :(得分:1)
我想你可以看看popcorn.js。 这是一个有趣的mozilla项目,似乎可以解决您的问题。
答案 2 :(得分:0)
不确定是否有人在此同意,但我可能更喜欢在setInterval()上使用setTimeout(),因为它避免使用事件侦听器,例如:
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);
}
它是一个基本的伪代码,但希望传达这个想法。