video 标签问题

Question

需求背景

需要对 video 的控制（play、pause、seeked）做相应的业务回调处理，此处指人为手动操作，点击播放、暂停、拖动进度条等。

但是有特殊场景是由其他业务触发 video 的操作，直接 js 操作 video.play() 等方法，此时就不应该执行上述回调处理。

当前问题

我手动点击了播放，触发了业务回调，导致其他业务场景触发我的 js 执行了 video.play()，导致形成 loop 循环。

解决思路

需要区分主动操作（人为）和被动（js 调用），我加上一个标志位 flag，当有触摸点击事件时置为 true，业务场景触发 video.play() 时置为 false。如此在 video 对应的操作回调中就能区分是否需要执行业务处理。

伪码

video.addEventListener('play', ()=> {
    if(flag) {
        // 业务处理
        doService();
    }
});

function doSomething() {
    flag = false;
    video.play();
    // doSomething...
}

问题是 flag = true 设置的契机不知道在哪里，还望有人帮助解答下，感激不尽。

前端小白至上~

Answer 1

最好是利用传参来解决此类问题。封装一个函数

function fun(fromWhere){
    if (fromWhere == '情况1'){
        //do 1...
    }
    else if (fromWhere == '情况2'){
        //do 2...
    }
}

接着，不管是手动触发，还是自动触发都需要调用你的函数fun，并准确传递参数过来。

Answer 2

把 js 控制的 play 封装成一个单独的 play 方法。
把 playFlag 放在匿名函数域内，避免被其他全局修改或污染。

;(function(){
    var playFlag = false;
    function play(){
        playFlag = true;
        // 此时下面的 play 事件会响应。
        video.play();
        // 三秒后自动把 playFlag 重置。
        setTimeout(function(){
            playFlag = false;
        },3000);
    }
    video.addEventListener('play', ()=> {
        // 如果 playFlag 为 true 则表示 使用脚本控制。
        if(playFlag) {
            doService();
            // 你也可以在这里处理完了之后设置一下 playFlag
            playFlag = false;
            return ;
        }
        // 这里则为手动控制
    });
})();