HTML5 <video> 标签原生不支持播放次数限制，必须通过 JavaScript 实现：监听 ended 事件累加计数，达上限后调用 pause() 并禁用 controls；需结合 play 事件拦截、状态锁及跨浏览器兼容处理。
HTML5 <video> 标签本身不支持播放次数限制
原生 <video> 元素没有 loop 之外的播放计数控制属性，也没有 maxplays="3" 这类标准属性。所有“限制播放 N 次”的逻辑必须由 JavaScript 主动干预。
用 ended 事件 + 计数器实现播放次数控制
核心思路：监听视频的 ended 事件（每次播完触发），累加播放次数；达到上限后调用 pause() 并禁用重播行为（如移除 controls、清空 src 或替换为占位内容）。
- 注意区分“播放完成”和“用户手动暂停”——只有
ended表示一次有效播放 - 需处理用户拖拽到末尾、快进跳过等可能绕过正常播放的情况（这类行为仍会触发
ended，所以计数依然可靠） - 若允许重新加载页面重置计数，需配合
localStorage或服务端状态才能跨会话持久化
const video = document.querySelector('video');
let playCount = 0;
const maxPlays = 3;
video.addEventListener('ended', () => {
playCount++;
if (playCount >= maxPlays) {
video.pause();
video.controls = false;
video.innerHTML = '<p>已达到播放上限</p>';
}
});
防止用户通过右键“重新加载视频”或 JS 调用 play() 绕过限制
仅监听 ended 不够——用户可能在未播完时调用 video.play() 多次，或刷新后重试。需结合 play 事件拦截与状态锁。
- 用布尔变量
isPlaybackLocked标记是否已达上限，拦截所有play()调用 - 监听
play事件并在其中preventDefault()（部分浏览器支持，但兼容性有限） - 更稳妥做法：在
play()调用前主动检查计数，直接拒绝 - 禁用右键菜单可减少“另存为/重新加载”操作，但无法彻底阻止技术用户
video.addEventListener('play', (e) => {
if (playCount >= maxPlays) {
e.preventDefault();
video.pause();
}
});
// 外部调用 play() 前也需检查
function safePlay() {
if (playCount < maxPlays) {
video.play().catch(e => console.warn('Play prevented:', e));
}
}
移动端 Safari 和部分安卓浏览器的特殊限制
iOS Safari 对自动播放、play() 调用时机、controls 属性修改有严格策略，容易导致计数失效或 UI 不同步。
立即学习“前端免费学习笔记（深入）”；
- 不要在非用户手势（如
click）回调外调用play()，否则会静默失败 -
video.controls = false在 iOS 上可能不立即生效，建议配合style.display = 'none'或覆盖层 - 某些安卓 WebView 会忽略
ended事件，可补充监听timeupdate判断是否接近duration（误差 ±0.1s）
真正难的不是写几行计数代码，而是覆盖所有重放路径——包括刷新、前进后退、iframe 重载、PWA 离线缓存等。业务上真要强控，得把限制逻辑下沉到服务端鉴权或 DRM 方案里。
