video 标签问题

需求背景

需要对 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 设置的契机不知道在哪里,还望有人帮助解答下,感激不尽。

前端小白至上~

阅读 2.5k
2 个回答

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

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

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

把 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 ;
        }
        // 这里则为手动控制
    });
})();
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题