Таймер «вместе» с Youtube клип с JS, чтобы показать div в разное время - PullRequest
Новая
       11

Таймер «вместе» с Youtube клип с JS, чтобы показать div в разное время

1 голос
/ 04 сентября 2011

Я хочу загрузить клип youtube на страницу, и вместе с клипом я хочу добавить верхний (HTML) слой, который будет работать в некотором роде как собственная функция аннотации youtube.

в пулях: - Пользователь увидит клип YT (вероятно, в пользовательском плеере) - В зависимости от текущего времени клипа мне нужно, чтобы JS загружал информацию в слой поверх клипа.

Итак: Например, с 0,00 до 0,05 вы видите фрагмент текста в верхней части клипа С 0,05 до 0,30 без текста С 0,30 до 0,37 снова текст и т. д.

Есть идеи, как к этому подойти? Я понимаю, что YouTube Player API имеет функциональность getCurrentTime Но как мне продолжать писать фрагмент JS, чтобы «подыграть» клипу в слое div поверх клипа?

Ответы [ 2 ]

2 голосов
/ 05 сентября 2011

Способ достижения этого действительно заключается в использовании метода getCurrentTime в yt api, в частности, вызове его в повторяющейся функции с помощью setInterval.

Вам нужно будет сохранить массив наложений, которые вы хотите представить, а также время от времени что-то вроде: 

var overlays = [
    {text:"Some text",from:1,to:6},
    {text:"Some other text",from:8,to:14}];

Тогда вам понадобится пара функций для обработки воспроизведения и остановки фильма (или приостановки). 

var watchId;
function startWatch(){
    watchId = setInterval( function(){
        showOrHideOverlay(ytplayer.getCurrentTime());
    },1000)
}

function stopWatch(){
  clearTimeout(watchId);
}

Вы заметите, что используется переменная ytplayer, и согласно документации jsapi ее можно получить с помощью следующего кода: 

var ytplayer ;
function onYouTubePlayerReady(playerId) {       
    ytplayer = document.getElementById("myytplayer");  
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");   
}

Обратите внимание, что я подключил прослушиватель событий, это приводит нас к методу обработки изменения состояния фильма 

function onytplayerStateChange(newState) {    
    if(newState == 1){ // playing
         startWatch()
    }
    else if(newState == 0 || newState == 2){ //ended or paused
         stopWatch();   
    }            
}

Итак, последний кусочек головоломки на самом деле обрабатывает «тик», который устанавливается каждую секунду. Этот метод showOrHideOverlay выглядит так: 

function showOrHideOverlay(time){
    // find overlays which should be visible at "time"
    var shownOverlays = false;
    for(var i=0;i<overlays.length;i++){
        if(overlays[i].from < time && overlays[i].to > time){
            $('#overlay').text(overlays[i].text);
            shownOverlays = true;
        }           
    }
    if(!shownOverlays)
        $('#overlay').text("");

}

Наконец, живой пример: http://jsfiddle.net/zTZjU/ (Просто нажмите кнопку воспроизведения на клипе)

0 голосов
/ 17 марта 2012

Проверьте эту скрипку: http://jsfiddle.net/rEeJS/
Я добавил wmode="transparent", чтобы наложение отображалось в Chrome.

...