在触摸设备上擦除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，触摸事件没有返回。要收听多个事件，请使用jQuery中的.on。这是最终的代码：

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