答案是必须通过判断video.paused状态并配合try...catch处理播放/暂停，同时遍历所有video元素实现互斥控制。直接调用play()/pause()易导致失败、报错或声音冲突，需同步更新按钮文本、排除当前视频、监听loadedmetadata事件，并兼顾移动端和iOS静音自动播放限制。
直接用 play() 和 pause() 就能控制，但必须处理好状态同步、错误抑制和多视频互斥——否则点一下没反应、点两下报错、多个视频同时响，都是常见现场。
点击按钮触发播放/暂停的最小可行代码
核心是判断 video.paused 状态，再调对应方法。不能只写 video.play() 就完事，因为已播放时再调会失败。
-
video.paused为true时才可安全调play()；反之调pause() - 按钮文本必须同步更新，否则用户无法感知当前状态
- 要包裹
try...catch，因为自动播放策略（如 Chrome 要求用户手势）可能让play()拒绝执行并抛出NotAllowedError
const video = document.getElementById('myVideo');
const btn = document.getElementById('playPauseBtn');
<p>btn.addEventListener('click', () => {
if (video.paused) {
video.play().catch(e => console.warn('Play failed:', e.name));
btn.textContent = '暂停';
} else {
video.pause();
btn.textContent = '播放';
}
});
多个视频共存时如何避免声音打架
用户点一个视频播放，其他正在播的必须立刻停——这不是 UI 体验问题，是浏览器音频策略强制要求：多数桌面浏览器只允许一个 <video> 同时发声（除非静音）。
- 不要只监听单个视频的点击，而应遍历所有
video元素统一管理 - 暂停逻辑里需排除当前目标元素：
if (el !== video && !el.paused) el.pause(); - 避免用
onclick = ...覆盖原有事件，统一用addEventListener
const videos = document.querySelectorAll('video');
videos.forEach(video => {
video.addEventListener('click', () => {
videos.forEach(v => {
if (v !== video && !v.paused) v.pause();
});
if (video.paused) video.play().catch(() => {});
});
});
为什么加了 controls 还要手写按钮
原生 controls 只解决“能用”，不解决“怎么用”。比如你没法用 CSS 定制它的图标、位置、大小，也不能把它和播放列表、字幕开关、画质选择器整合在一起。
立即学习“前端免费学习笔记（深入）”；
-
controls是黑盒，内部结构不可选、不可监听细粒度事件（如“拖动进度条松手瞬间”） - 自定义按钮可绑定
data-*属性传递上下文，比如关联某个课程章节 ID - 移动端真机测试时，原生控件在某些 Android WebView 中会失灵或尺寸异常，手写更可控
容易被忽略的兼容性细节
video.duration 在加载完成前是 NaN，video.readyState 为 0；很多自定义进度条因此初始化失败。
- 监听
loadedmetadata事件后再读取duration、设置初始时间点 -
canPlayType('video/mp4')返回'probably'或'maybe'，不能只靠它决定是否插入<source> - iOS Safari 不支持
autoplay有声音的视频，但允许muted autoplay，这点常被忽略
真正麻烦的不是写对一行 video.play()，而是确保它在用户伸手点下去的那一刻，既不卡住、也不报错、还不干扰别人——状态管理、错误防御、跨端行为，三者缺一不可。
