如何在 HTML5 视频播放器中实现广告插播（Preroll/Midroll）-html教程-PHP中文网

如何在 HTML5 视频播放器中实现广告插播（Preroll/Midroll）

本文详解如何基于原生标签与 JavaScript 实现视频广告插播（含片头广告与播放中广告），通过双视频元素切换、时间监听与状态控制完成无缝过渡，无需第三方库即可构建轻量级广告集成方案。

本文详解如何基于原生 `

在 HTML5 原生视频播放器中插入广告（如 preroll 片头广告、midroll 播放中广告），关键在于分离主内容与广告流，并精准控制播放状态切换。由于 <video></video> 标签本身不支持广告协议（如 VAST），需借助 JavaScript 主动管理播放逻辑。

✅ 推荐实现方式：双 `<video></video>` 元素 + 状态驱动切换

使用两个隐藏/显示切换的 <video></video> 元素——一个专用于播放广告（#ad-video），一个用于播放主内容（#main-video）。通过监听 timeupdate 事件判断当前播放进度，在预设时间点（如第 30 秒）暂停主视频、加载并播放广告，广告结束后自动恢复主视频。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<video id="main-video" controls poster="poster.jpg"><source src="main.mp4" type="video/mp4"></source></video><video id="ad-video" style="display:none;" muted><source src="ad.mp4" type="video/mp4"></source></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），但核心逻辑仍基于上述状态切换模型。