Задействане на събития с помощта на Handler от html5 видео плейър с JQuery

Използвам този метод (намерен в Stack Overflow) за изпълнение на събитие при пречистване на HMTL видео: Задействане на събития от html5 видеоплейър с JQuery

работи перфектно. Въпреки това, аз съм на загуба как да задействам различно събитие, когато търкам времевата линия на видеото назад към предишно (по-ранно) време. Бих искал да изключа събитието и може би да добавя различно събитие, когато потребителят достигне предишното първоначално време.

Използвам този метод за „пречистване“ на времевата линия:

var windowwidth = $(window).width()-20;

var scrollpos = window.pageXOffset/200;
var targetscrollpos = scrollpos;
var accel = 0;

// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.

// pause video on load
vid.pause();


window.onscroll = function(){
    //Set the video position that we want to end up at:
    targetscrollpos = window.pageXOffset/200;   
};

setInterval(function(){  
      //Accelerate towards the target:
      scrollpos += (targetscrollpos - scrollpos)*accelamount;
      //update video playback
      vid.currentTime = scrollpos;
     vid.pause();
}, 60);

и този код от предишния въпрос за препълване на стека за задействане на събитие(я)

    $(".boxB").animate({ marginLeft:'0px'},400);
    $(".boxA").animate({ width:'620px'}, 400);
}

var runAtTime = function(handler, time) {
     var wrapped = function() {
         if(this.currentTime >= time) {
             $(this).off('timeupdate', wrapped);
             return handler.apply(this, arguments);
        }
     }
    return wrapped;
};

$('#v0').on('timeupdate', runAtTime(myHandler, 3.5));

Тук съществува работеща версия: http://www.mediaflash.ca/swipe_video_timeline/index.html

Функцията ще работи само ако използвате мишка с колелце за превъртане и превъртате наляво и надясно или плъзнете наляво/надясно на iOS устройство.


html video timeline
person James T    schedule 09.05.2019    source източник
comment
Значи искате да знаете дали потребителят е превъртял назад или напред във времето? Просто запазете последното видяно време с вашия елемент и при следващото събитие на скраб проверете дали новото време е по-голямо или по-малко от времето преди това. Това ли искаш да правиш?   -  person Harry    schedule 10.05.2019
comment
Да, вярвам, че точно това искам да направя. Не съм сигурен как да го направя. Мислите ли, че мога да спася метода, който използвам в момента, или трябва да използвам съвсем различен подход? Предполагам if(this,currentTime ‹= 2.5 (или каквото и да е друго число, което избера)..then... Не знам какво тогава.   -  person James T    schedule 10.05.2019

Отговори (1)


arrow_upward
0
arrow_downward

Доколкото знам, няма отделно събитие, което да е достъпно за превъртане напред/назад.

Това, което можете да направите, за да проверите дали потребителят е превъртял назад, е да съхраните последното време и да го сравните с новото време на пречистване, като това:

var m_lastVideoTime = 0;//global scope

var runAtTime = function(handler, time) {

     var wrapped = function() {
         if (m_lastVideoTime < this.currentTime){
           //user scrolled back in time, do what you like here
         }
         m_lastVideoTime = this.currentTime;
         if(this.currentTime >= time) {
             //time exceeded specified value (3.5)
             $(this).off('timeupdate', wrapped);
             return handler.apply(this, arguments);
        }
     }
    return wrapped;
};

Вашето текущо име на функция runAtTime е малко подвеждащо, защото се изпълнява всеки път, когато времето на видеото се актуализира. Той обаче вече се изключва, когато времето 3,5 е превишено.

От този момент функцията runAtTime в момента никога не се извиква отново, докато страницата не се презареди, защото я прикачвате само веднъж с помощта на функцията .on jquery.

person Harry    schedule 10.05.2019
comment
Това изглежда като интересно решение, благодаря ви, че го публикувахте. Опитах различни начини да го внедря, но изобщо не съм сигурен как да го направя правилно. Все още експериментирам - person James T; 14.05.2019