用javascript控制video播放暂停需调用play()和pause()，但必须由用户手势触发，监听play、pause、ended事件同步ui，并检查readystate≥2或等待canplay事件确保可播。
怎么用 JavaScript 控制 <video></video> 的播放与暂停
直接调用原生方法最稳，不用重写 UI 也能接管逻辑。play() 和 pause() 是核心，但得注意它们可能被浏览器策略拒绝（比如用户未交互就自动播放）。
常见错误是直接在页面加载时调用 play()，结果静音也不行——现代浏览器要求用户手势触发（如 click、touchstart）后才能播放。所以自定义按钮必须绑定在用户可点击的元素上。
- 用
videoEl.play()启动播放，失败时 catch 错误（如NotAllowedError） -
videoEl.pause()总是安全，无需 try/catch - 检查
videoEl.paused判断当前状态，别依赖按钮文字或 class 做逻辑分支 - 避免重复调用
play()：如果视频已在播放，再调会抛NotSupportedError或静默失败
如何让自定义按钮同步更新 UI 状态
按钮文字或图标要实时反映视频状态，不能只靠点击切换——比如用户用键盘空格键控制、或系统自动暂停（如切到其他 tab），UI 就会脱节。
监听 play、pause、ended 事件比轮询更可靠，但要注意：play 事件只在成功开始播放后触发，而 playing 事件更早一点（缓冲完成即发），更适合更新“正在播放”视觉反馈。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 推荐监听
play和pause两个事件来更新按钮文案或 class - 加上
ended事件，自动还原为“播放”状态（否则视频播完按钮还显示“暂停”） - 不要只监听点击事件做 UI 切换——漏掉外部控制路径（如快捷键、API 调用）
- 如果用了
controls属性，隐藏原生控件后仍需监听这些事件，因为原生控件操作也会触发它们
为什么 togglePlay() 不能简单写成 paused ? play() : pause()
看起来合理，但实际运行会出问题：当视频处于加载中（readyState === 0）或网络错误时，paused 可能为 true，但此时调 play() 会失败，且不会自动恢复。
更稳妥的做法是先判断是否可播放：videoEl.readyState >= 2（表示至少有第一帧元数据）；否则提示加载中或等 canplay 事件后再操作。
-
readyState值为 0 表示无信息，1 是有元数据但没帧，2 才能安全play() - 监听
canplay或loadeddata事件，确保资源可用再启用按钮 - 对移动设备尤其重要：iOS Safari 在未加载完成前调
play()几乎必失败 - 可以加个 loading 状态（比如按钮变灰 + 转圈），避免用户反复点击无效操作
自定义按钮 HTML 结构和基础 JS 绑定示例
不需要复杂框架，原生写法足够清晰。重点是把事件绑定、状态检查、错误处理都包进去，而不是只写个开关函数。
<video id="myVideo" src="demo.mp4" muted></video><button id="playBtn">播放</button>
<script>
const video = document.getElementById('myVideo');
const btn = document.getElementById('playBtn');
btn.addEventListener('click', () => {
if (video.paused) {
video.play().catch(e => {
console.warn('播放失败:', e.name);
// 可在此提示用户手动点视频区域或取消静音
});
} else {
video.pause();
}
});
video.addEventListener('play', () => btn.textContent = '暂停');
video.addEventListener('pause', () => btn.textContent = '播放');
video.addEventListener('ended', () => btn.textContent = '播放');
</script>
这个例子没处理加载态，真实项目里建议加 canplay 监听和 loading 提示。移动端还要注意 muted 属性——不静音的话，iOS 默认禁止自动播放，且用户首次交互后也未必能解禁音频。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
