17370845950

HTML5 标签原生不支持播放次数限制，必须通过 JavaScript 实现：监听 ended 事件累加计数，达上限后调用 pause() 并禁用 controls；需结合 play 事件拦截、状态锁及跨浏览器兼容处理。

HTML5 标签本身不支持播放次数限制

原生 元素没有 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 = '
已达到播放上限
';
  }
});

防止用户通过右键“重新加载视频”或 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 方案里。