Запуск событий с использованием обработчика из видеоплеера html5 с JQuery

Я использую этот метод (найденный в переполнении стека) для выполнения события при очистке видео 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
Да, я верю, что это именно то, чем я хочу заниматься. Я не уверен, как это сделать. Как вы думаете, смогу ли я спасти тот метод, который сейчас использую, или мне следует использовать совсем другой подход? Я предполагаю, что если (это, текущее время ‹ = 2,5 (или любое другое число, которое я выберу)).. тогда... я не знаю, что тогда.   -  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