video 标签如何让 快进快退不触发 onpause ?

Question

当使用 <video /> 标签时

我需要监听 onpause 事件执行某些操作

但是发现当 拖动视频的进度条 快进快退时候， onpause 事件也触发了

如何让它不触发呢？ 我只想监听播放暂停的暂停，不包括快进快退的暂停

Answer 1

可以使用播放器的 seeking 属性，来检查播放器当前是否正在寻找新的播放位置，将他放在 pause 事件中，当因拖动进度条产生的 pause 事件时，就可以用这个属性来判断。

    const player = document.querySelector('#player');
    player.addEventListener('pause', function onPause(event) {
        if (player.seeking) {
            return;
        }
        console.log('on pause');
    })

监听 seeked 事件，当这个事件触发时设置一个标识位置为 1 ，再加一个 setTimeout ，大约 300 ms 左右重置标识位。

在 pause 事件的处理器前面加上，如果标识为 1 就 return ，不往下执行。