2015-08-13 1 views
1

Целью является создание видеопроигрывателя, который воспроизводится только через внешние события, что является щелчком. Событие клика содержит аттрибут данных, который указывает область воспроизведения, т. Е. Через 10 секунд через 25 секунд.JWPlayer время поиска области и сброс vars

Несколько кнопок существует. После того как каждый раз истек, он должен приостановить видео.

Последовательность кнопок будет отображаться в случайном порядке.

Heres пример кода: http://jsfiddle.net/arkjoseph/n2rpq1t4/28/

<div id="player"></div> 


<section> 
    <div class="seeker" data-start="0" data-end="5">Go to 0-5</div> 
</section> 
<section> 
    <div class="seeker" data-start="6" data-end="10">Go to 6-10</div> 
</section> 



$(function(){ 

    $("section").each(function(){ 
     $(this).find(".seeker").on('click',function(event){ 
      var start = $(this).data('start'), 
       end = $(this).data('end'); 
      seekitnow(start,end);    
     }); 
    }); 
}); 

function seekitnow(start,end) { 
    jwplayer("player").seek(start).onTime(function(event) { 
     var start; 
     if(event.position >= end) { 
      this.pause(); 
     } 
     //var end; 
    }); 
    } 

Работы по степени, но каждый щелчок кнопки регистрирует существующую переменную, которая была сохранена (начало/конец). Как я могу предотвратить это?

Если я нажму кнопку 1 (0-5), он отлично работает. Если я нахожу 6-10, видео останавливается, а консоль имеет 0,5,6,10.

ПОМОЩЬ!

ответ

2

Я отлаживал это немного, чтобы попытаться выяснить, что такое странное поведение.

я заметил, что каждый раз, когда нажимали на Go to 0-5 и Go to 6-10 секции jwPlayer.onTime() был называться наряду с созданием новых обработчиков jwPlayer (jwplayer("player").seek(start).onTime(function(event) {), в результате чего новые функции обратного вызова добавляется в очередь обратных вызовов за время jwPlayer изменить событие.

Это вызывало странное поведение, когда я продолжал нажимать на разделы.

Я изменил код так, чтобы onTime() был выполнен только один раз и что end является общим, а затем разворачивает jsFiddle.

В результате поведение:

  • При нажатии на Go to 0-5, то видео времени 0 и пауз когда второй 5 достигается.
  • При нажатии на Go to 6-10 видео стремится ко второму 5 и делает паузу при достижении второго 10.

Является ли это правильное поведение ?: https://jsfiddle.net/a8dao9d4/

jwplayer("player").setup({ 
    file: "https://player.vimeo.com/external/135492851.hd.mp4?s=a61836463fbde188aaa1e24e6bfeeb39&profile_id=113", 
    startparam: "starttime", 
}); 

$(function(){ 

    var player = jwplayer("player"); 
    var end = 32; 

    player.onTime(function(event) { 
     if(event.position >= end) { 
      this.pause(); 
     } 
    }); 

    $("section").each(function(){ 
     $(this).find(".seeker").on('click',function(event){ 
      end = $(this).data('end'); 

      player.seek(
       $(this).data('start') 
      ); 
     }); 
    }); 

}); 
+0

Спасибо за пояснения вашего процесса отладки. Я не знал, что onTime можно использовать таким образом. – arkjoseph

+0

Хороший ответ! Спасибо, что поделились этим. – emaxsaun