跳过按钮必须由JavaScript控制，HTML无原生支持；需监听timeupdate事件判断广告时长、动态启用按钮，点击后设置currentTime并调用play()，同时处理浏览器自动播放策略、可访问性和移动端兼容性问题。
跳过按钮必须由 JavaScript 控制，HTML 本身不支持原生“跳过”语义
浏览器的 元素没有内置跳过广告的 API 或属性。所谓“跳过”，本质是监听用户点击后，跳过当前广告片段（比如跳到主内容），或隐藏广告容器并恢复主视频播放。这需要你明确区分广告时段和内容时段，并用 JS 管理状态。
常见错误是只加一个 就以为完事——它没绑定逻辑，点不了，或者点了没反应，甚至破坏视频播放流程。
- 广告必须有明确的起止时间（例如：广告从
0s开始、持续5s） - 主视频需在广告结束后自动恢复，不能靠用户手动点播放
- 跳过按钮默认应禁用（
disabled），直到广告播放满指定秒数才启用
用 video.currentTime 和 video.pause() 实现跳过逻辑
核心是监听 timeupdate 事件，当广告播放时长 ≥ 跳过阈值（如 5 秒），就启用按钮；点击后直接把 currentTime 设为广告结束位置，并调用 play()（如果主内容已加载）。
示例逻辑（假设广告 5 秒，主内容从 5 秒开始）：
const video = document.querySelector('video');
const skipBtn = document.getElementById('skip-btn');
let adDuration = 5;
let isAdPlaying = true;
video.addEventListener('timeupdate', () => {
if (isAdPlaying && video.currentTime >= adDuration) {
skipBtn.disabled = false;
}
});
skipBtn.addEventListener('click', () => {
isAdPlaying = false;
video.currentTime = adDuration;
video.play().catch(e => console.warn('Auto-play prevented:', e));
});
注意：video.play() 可能被浏览器静音策略拒绝，尤其未用户交互触发时。所以建议在用户点击跳过前，先确保已有一次合法的用户手势（如页面加载后用户点过任意按钮）。
跳过按钮 UI 必须与广告生命周期同步显隐
不能让按钮一直显示在视频上层，否则干扰观看；也不能用 display: none 粗暴隐藏——会导致布局跳动或焦点丢失。推荐用 visibility: hidden + opacity: 0 配合 transition，并在 JS 中统一控制。
- 广告开始时：按钮
visibility: visible、opacity: 0、pointer-events: none - 倒计时结束时：移除
pointer-events: none，动画过渡到opacity: 1 - 跳过后：立即设
visibility: hidden，避免残留
别忘了给按钮加 aria-label="跳过广告" 和 role="button"，满足基础可访问性要求。
真实项目中容易忽略的兼容性坑
移动端 Safari 对自动播放、currentTime 设置、以及 play() 的限制比 Chrome 更严。比如：video.currentTime = 5 在 iOS 上若视频尚未 fully buffered，可能无效，且不报错。
- 务必监听
canplay或loadeddata后再设置currentTime，而不是仅靠timeupdate - 不要依赖
duration属性判断广告长度——流式广告（如 HLS）的duration可能为Infinity，得靠服务端返回的元数据 - 如果广告是独立
标签（非主视频内嵌），跳过时要pause()广告视频、play()主视频，并切换 DOM 显示状态
最麻烦的不是加按钮，而是准确感知广告何时真正可跳过——这往往取决于你的广告 SDK（如 Google IMA、JW Player）是否暴露了 adstart、adskipavailable 这类事件。纯 HTML + 原生 Video API 做不到可靠跳过，除非你完全掌控广告注入时机和时长。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
