如何解决The play() request was interrupted by a call to pause()报错问题

算力阿峰

2026-9-28

问题根因

HTMLMediaElement.play() 是异步方法，执行后会返回 Promise 实例，不会立刻完成播放动作。如果在 play() 的 Promise 还处于 pending 状态时就调用 pause()，就会抛出你遇到的未捕获异步异常。另外你代码中的 myVideo 没有加变量声明，会意外挂载到全局作用域，也可能引发变量冲突导致播放逻辑异常。

修复方案

你需要对 play() 方法的异步结果做处理，同时修正变量声明问题，调整状态变更的时机，修复后的代码如下：

jQuery(document).ready(function($){
    var ppbutton = document.getElementById("vidbutton");
    var myVideo = document.getElementById("video1"); // 补全变量声明，避免全局污染
    ppbutton.addEventListener("click", playPause);

    function playPause() {
        if (myVideo.paused) {
            myVideo.play()
            .then(() => {
                // 播放成功后再修改按钮文本，保证状态和实际播放情况一致
                ppbutton.innerHTML = "Pause";
            })
            .catch(err => {
                // 过滤正常的暂停打断类异常，避免控制台抛错
                if (err.name !== 'AbortError') {
                    console.error('播放失败：', err);
                }
            });
        } else  {
            myVideo.pause();
            ppbutton.innerHTML = "Play";
        }
    }
});