如何使用<video>标签在HTML5视频播放器播放时插播广告

原生<video>标签没有内置插播广告的能力，需要结合JavaScript监听视频事件来实现。核心思路是：监听主视频的播放进度，到达预设的插播时间点时暂停主视频，切换到广告视频；广告播放完毕后，切回主视频并从暂停位置继续播放。

实现步骤与代码示例 #

1. HTML结构

用单个<video>元素承载主视频，同时预加载广告视频避免播放卡顿，通过切换显示状态和资源实现内容切换：

<video id="mainVideo" controls poster="主视频封面图地址">
  <source src="主视频地址.mp4" type="video/mp4">
  你的浏览器不支持HTML5视频
</video>

<!-- 预加载广告视频，默认隐藏 -->
<video id="adVideo" preload="auto" style="display: none;">
  <source src="广告视频地址.mp4" type="video/mp4">
</video>

2. JavaScript逻辑

const mainVideo = document.getElementById('mainVideo');
const adVideo = document.getElementById('adVideo');
// 预设插播触发时间（单位：秒），比如播放到10秒时插播
const adTriggerTime = 10;
// 标记是否正在播放广告，防止重复触发
let isPlayingAd = false;
// 记录主视频暂停时的进度位置
let mainVideoResumePoint = 0;

// 监听主视频播放进度更新
mainVideo.addEventListener('timeupdate', () => {
  if (!isPlayingAd && mainVideo.currentTime >= adTriggerTime) {
    mainVideoResumePoint = mainVideo.currentTime;
    mainVideo.pause();
    playAd();
  }
});

// 切换到广告播放的逻辑
function playAd() {
  isPlayingAd = true;
  mainVideo.style.display = 'none';
  adVideo.style.display = 'block';
  adVideo.currentTime = 0;
  adVideo.play();
}

// 广告播放完毕后切回主视频
adVideo.addEventListener('ended', () => {
  adVideo.style.display = 'none';
  mainVideo.style.display = 'block';
  mainVideo.currentTime = mainVideoResumePoint;
  mainVideo.play();
  isPlayingAd = false;
});

// 处理用户主动暂停主视频的情况，更新记录的进度点
mainVideo.addEventListener('pause', () => {
  if (!isPlayingAd) {
    mainVideoResumePoint = mainVideo.currentTime;
  }
});

额外优化方向 #

• 多插播点支持：把adTriggerTime改成数组（如[10, 30, 50]），每次触发后移除对应时间点，实现多次插播
• 跳过广告功能：给广告视频添加跳过按钮，点击后直接终止广告并切回主视频
• 加载状态处理：监听广告视频的loadeddata事件，确保广告加载完成后再触发插播
• 状态同步：同步主视频与广告的静音、播放速度状态，保持用户体验一致性

内容的提问来源于stack exchange，提问作者Siva Krishna