Вопрос по api, youtube – Событие YouTube API в указанное время

12

Можно ли с помощью API YouTube инициировать событие, когда видео достигает указанного времени? например когда видео достигает 20 сек. запустить событие.

Спасибо,
Mauro

Ваш Ответ

3   ответа
0

Не уверен, что здесь кто-то согласен, но я бы предпочел использовать 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);
}

Это основной псевдокод, но, надеюсь, передает идею.

14

не уверен, что вам все еще нужен ответ (как я нахожу его 4 месяца спустя), но вот как я это сделал с помощью iframe youtube embed api. Это уродливо в том смысле, что для этого требуется setInterval, но на самом деле "timeupdate" не существует. событие в API YouTube (по крайней мере, в 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.

Лучшая версия этого кода здесь:stackoverflow.com/questions/9914373/…
1

Я думаю, что вы можете взглянуть наpopcorn.js. It's an interesting mozilla project and it seems to solve your problem.

Это больше не поддерживается Mozilla

Похожие вопросы