本文详解如何基于原生 标签与 JavaScript 实现视频广告插播（含片头广告与播放中广告），通过双视频元素切换、时间监听与状态控制完成无缝过渡，无需第三方库即可构建轻量级广告集成方案。
本文详解如何基于原生 `
在 HTML5 原生视频播放器中插入广告（如 preroll 片头广告、midroll 播放中广告），关键在于分离主内容与广告流，并精准控制播放状态切换。由于 <video></video> 标签本身不支持广告协议（如 VAST），需借助 JavaScript 主动管理播放逻辑。
✅ 推荐实现方式：双 <video></video> 元素 + 状态驱动切换
使用两个隐藏/显示切换的 <video></video> 元素——一个专用于播放广告（#ad-video），一个用于播放主内容（#main-video）。通过监听 timeupdate 事件判断当前播放进度，在预设时间点（如第 30 秒）暂停主视频、加载并播放广告，广告结束后自动恢复主视频。
<video id="main-video" controls poster="poster.jpg"> <source src="main.mp4" type="video/mp4"> </video> <video id="ad-video" style="display:none;" muted> <source src="ad.mp4" type="video/mp4"> </video>
const mainVideo = document.getElementById('main-video');
const adVideo = document.getElementById('ad-video');
// 预设 midroll 广告触发时间点（秒）
const adBreaks = [30, 60];
mainVideo.addEventListener('timeupdate', () => {
const currentTime = Math.floor(mainVideo.currentTime);
const nextAd = adBreaks.find(t => t === currentTime && !mainVideo.paused);
if (nextAd) {
mainVideo.pause();
adVideo.currentTime = 0;
adVideo.play().catch(e => console.warn("Ad playback blocked:", e));
adVideo.style.display = 'block';
}
});
adVideo.addEventListener('ended', () => {
adVideo.style.display = 'none';
mainVideo.currentTime = adBreaks[0] || 0; // 可按需跳转至断点后位置
mainVideo.play();
});⚠️ 注意事项与最佳实践
-
自动播放限制：现代浏览器禁止无用户交互触发的有声视频自动播放。广告视频建议添加
muted属性，并确保首次播放由用户点击等手势触发。 - 用户体验优化：广告播放前可显示加载提示；广告结束时建议淡出过渡，避免画面突变。
-
错误处理：
adVideo.play()可能被拒绝（Promise reject），务必用.catch()捕获，降级为跳过广告或提示用户手动播放。 -
扩展性建议：如需支持多广告、VAST 解析或跳过功能，可封装为类（如
AdManager），但核心逻辑仍基于上述状态切换模型。
该方案轻量、可控、兼容性强，适用于中小型项目快速集成广告能力，是原生 HTML5 视频广告落地的可靠起点。
