在指定时间的Youtube API事件

编程入门 行业动态 更新时间:2024-10-28 11:18:53
本文介绍了在指定时间的Youtube API事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

是否有可能通过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.

谢谢,结果毛罗

Thanks, Mauro

推荐答案

不知道你是否还需要一个答案(因为我4个月后发现它),但这里就是我如何做到了这一点与YouTube的iframe嵌入API。这是丑陋的,它需要一个setInterval的,但实在是没有任何一种YouTube的API(至少不是在iframe API)在timeupdate的事件,所以你要那种假货通过检查录像时间每很经常。它似乎运行得很好。

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/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的录入()函数,调用战略性 timeupdater =的setInterval(录入,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事件

本文发布于:2023-11-24 09:55:11,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1624743.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:事件   时间   Youtube   API

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!