可通过五种方式用JavaScript调用video.pause()暂停HTML5视频：一、通过ID获取元素后直接调用；二、用querySelector选择器定位并检查pause方法存在性；三、绑定按钮点击事件触发；四、监听timeupdate事件按时间阈值自动暂停；五、用try...catch捕获错误并检查readyState和networkState确保兼容性。
如果您在使用 HTML5 的
一、通过元素 ID 直接调用 pause() 方法
该方法适用于页面中已存在具有唯一 id 属性的
1、在 HTML 中为
2、在 script 标签或外部 JS 文件中，使用 document.getElementById 获取该元素。
立即学习“前端免费学习笔记（深入）”；
3、调用 pause() 方法：document.getElementById('myVideo').pause();。
二、通过 querySelector 选择器获取 video 元素并暂停
当页面中存在多个 video 元素，或未设置 id 但可通过 class、data 属性等定位时，querySelector 提供更灵活的选择能力。
1、为目标
2、执行 const video = document.querySelector('.player');。
3、检查 video 是否存在且具备 pause 方法：if (video && typeof video.pause === 'function') video.pause();。
三、绑定按钮点击事件触发 pause()
该方式将暂停操作与用户交互解耦，通过独立按钮控制播放状态，提升可操作性与可访问性。
1、在 HTML 中添加一个按钮：。
2、获取按钮和 video 元素：const btn = document.getElementById('pauseBtn'); const vid = document.querySelector('video');。
3、为按钮绑定点击监听器：btn.addEventListener('click', () => { vid.pause(); });。
四、在视频播放过程中动态检测并暂停
适用于需要根据播放进度、时间点或媒体事件（如 timeupdate）自动暂停的场景。
1、监听 timeupdate 事件：video.addEventListener('timeupdate', handleTimeUpdate);。
2、在回调函数中判断当前播放时间是否达到指定阈值，例如 10 秒：if (video.currentTime >= 10) { video.pause(); }。
3、为避免重复暂停，可在触发后移除监听器：video.removeEventListener('timeupdate', handleTimeUpdate);。
五、处理 pause() 调用失败的兼容性应对
某些浏览器或移动设备在视频未完成加载或处于静音/非用户手势触发状态下会拒绝 pause() 执行，需捕获错误并提供降级路径。
1、使用 try...catch 包裹 pause() 调用：try { video.pause(); } catch (e) { console.warn('pause() failed:', e); }。
2、检查 readyState 值是否大于等于 1（HAVE_METADATA）：if (video.readyState >= 1) video.pause();。
3、若 video.networkState 为 NETWORK_NO_SOURCE 或 NETWORK_EMPTY，说明资源不可用，pause() 将无实际效果。
