Очистка видео HTML5 на сенсорных устройствах

Question

Как оптимизировать процесс очистки видео для сенсорных устройств?Для мыши все работает успешно, используя события mousedown mousemove.Но очистка не работает на iPad.

var paused;
var shiftX;

progressBar.addEventListener('mousedown', startScrubbing);

function startScrubbing(e) {
    paused = video.paused;
    if (!paused) video.pause();
    shiftX = e.pageX - e.offsetX;
    scrubbing(e);
    document.addEventListener('mousemove', scrubbing);
    document.addEventListener('mouseup', stopScrubbing);
}

function scrubbing(e) {
    video.currentTime = ((e.pageX - shiftX) / progressBar.offsetWidth) * video.duration;
}

function stopScrubbing() {
    document.removeEventListener('mousemove', scrubbing);
    document.removeEventListener('mouseup', stopScrubbing);
    if (!paused) video.play();
}

Пример на CodePen

Answer 1

Для сенсорного дисплея необходимо использовать события: touchstart, touchmove, touchend. А также я использовал экспериментальный параметр e.offsetX, который не возвращается для сенсорных событий. Чтобы прослушать несколько событий, используйте .on из jQuery. Вот окончательный код:

var paused;
var shiftX = progressBar.getBoundingClientRect().left;

$('.progress-bar').on('mousedown touchstart', function(e) {
    paused = video.paused;
    if (!paused) video.pause();
    scrubbing(e);
    $(document).on('mousemove touchmove', scrubbing);
    $(document).on('mouseup touchend', function() {
        $(document).off('mousemove touchmove');
        $(document).off('mouseup touchend');
        if (!paused) video.play();
    });
});

function scrubbing(e) {
    video.currentTime = ((e.pageX - shiftX) / progressBar.offsetWidth) * video.duration;
}

CodePen