如何在video player中植入广告，实现定时播放5秒后自动切回原视频？

核心逻辑是监听原视频播放进度，到达指定时间点后暂停原视频、切换播放广告，广告播放满5秒后自动恢复原视频进度继续播放。

实现步骤 #

• 预设广告触发的时间点、广告播放时长两个核心参数
• 监听原视频的timeupdate事件，实时比对当前播放进度是否到达触发阈值
• 触发插播时：记录原视频当前播放位置，隐藏原视频播放器，显示并播放广告视频
• 监听广告视频的播放进度，播放满5秒后：暂停隐藏广告，将原视频跳转回之前记录的进度继续播放

完整可运行代码示例 #

<!-- 原视频播放器 -->
<video id="originalVideo" controls width="600">
  <source src="你的原视频地址.mp4" type="video/mp4">
</video>
<!-- 广告播放器，默认隐藏 -->
<video id="adVideo" width="600" style="display: none;">
  <source src="你的广告视频地址.mp4" type="video/mp4">
</video>

<script>
const originalVid = document.getElementById('originalVideo');
const adVid = document.getElementById('adVideo');
// 配置项：广告触发时间（单位：秒）
const AD_TRIGGER_TIME = 10;
// 配置项：广告播放时长（单位：秒）
const AD_PLAY_DURATION = 5;
// 存储原视频插播广告前的播放进度
let originalPlayPos = 0;
// 标记广告是否已播放，避免重复触发
let adHasPlayed = false;

// 监听原视频播放进度
originalVid.addEventListener('timeupdate', () => {
  if (originalVid.currentTime >= AD_TRIGGER_TIME && !adHasPlayed) {
    adHasPlayed = true;
    // 记录原视频进度，暂停隐藏原视频
    originalPlayPos = originalVid.currentTime;
    originalVid.pause();
    originalVid.style.display = 'none';
    // 显示并播放广告
    adVid.style.display = 'block';
    adVid.play();
  }
});

// 监听广告播放进度
adVid.addEventListener('timeupdate', () => {
  if (adVid.currentTime >= AD_PLAY_DURATION) {
    // 暂停隐藏广告
    adVid.pause();
    adVid.style.display = 'none';
    // 恢复原视频播放
    originalVid.currentTime = originalPlayPos;
    originalVid.style.display = 'block';
    originalVid.play();
  }
});
</script>

可选优化点 #

• 若需要支持多个时间点插播广告，可将AD_TRIGGER_TIME改为数组，遍历匹配当前进度即可
• 可新增广告倒计时文案提示，提升用户体验
• 若广告本身时长小于等于5秒，可直接监听广告的ended事件触发切回逻辑，不需要额外比对播放时间
• 生产环境建议新增广告加载失败的异常处理逻辑，加载失败时直接跳过广告，不影响原视频正常播放

内容的提问来源于stack exchange，提问作者olan kendrick