Возможно ли использование API YouTube для запуска события, когда видео достигает определенного времени? например когда видео достигает 20 секунд. запустите событие.
Спасибо,
Mauro
Возможно ли использование API YouTube для запуска события, когда видео достигает определенного времени? например когда видео достигает 20 секунд. запустите событие.
Спасибо,
Mauro
не уверен, что вам все еще нужен ответ на этот вопрос (как я нахожу его через 4 месяца), но вот как я это сделал с помощью iframe iframe embed api. Это уродливо в том, что для него требуется setInterval, но в API YouTube действительно нет какого-либо события "timeupdate" (по крайней мере, не в API iframe), поэтому вам нужно подделать его, проверяя время видео каждый так часто. Кажется, он работает нормально.
Скажем, вы хотите запустить плеер как показано здесь с помощью YT.Player(), и вы хотите реализовать свой собственный 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, которая проверяет воспроизведение и паузу. Вам просто нужно отделить функцию updateTime() от onPlayerReady и стратегически вызвать timeupdater = setInterval(updateTime, 100);
и clearInterval(timeupdater);
в правильных обработчиках событий. Подробнее см. здесь для использования событий с YouTube.
Я думаю, вы можете взглянуть на popcorn.js. Это интересный проект mozilla, и он, кажется, решает вашу проблему.
Не уверен, что кто-то согласен с этим, но я могу предпочесть использовать setTimeout() над setInterval(), поскольку он избегает использования прослушивателей событий, например:
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);
}
Его базовый псевдокод, но, надеюсь, передает идею.