HTML怎么在网页中嵌入视频贴片广告-html教程-PHP中文网

video标签本身不支持广告贴片，需用javascript控制播放时机：pre-roll在用户交互后播放广告再衔接主视频，mid-roll需监听timeupdate并保存/恢复时间点，post-roll在ended事件后触发；所有play()必须在用户手势中调用，ios需muted+playsinline+preload="metadata"。

html怎么在网页中嵌入视频贴片广告

video 标签本身不支持广告贴片，必须靠 JavaScript 控制播放时机

HTML <video></video> 只是媒体容器，没有广告调度能力。所谓“贴片广告”，本质是在主视频开始前（pre-roll）、暂停时（mid-roll）或结束后（post-roll）插入另一段视频，并阻止主内容播放。这需要监听 play、timeupdate、ended 等事件，手动切换 src 和控制 play()/pause()。

常见错误现象：autoplay 被浏览器拦截导致 pre-roll 广告无法自动播放；广告视频加载完成前就调用 play() 报错 DOMException: play() failed because the user didn't interact with the document；广告播完后没重置主视频时间点，导致跳过开头几秒。

必须等用户真实交互（如点击按钮）后，才能安全调用 play() —— 这是现代浏览器的 autoplay 策略硬限制
广告视频建议用 preload="metadata" 减少初始加载量，主视频可设 preload="none" 避免提前下载
mid-roll 需监听 timeupdate 并用 Math.abs(currentTime - triggerTime) 判断是否到达插播点，避免因帧率或精度漏触发

用 addEventListener 监听 ended 事件实现 pre-roll 广告链式播放

最简可行路径：先加载广告视频 → 播完 → 自动加载并播放主视频。关键不是“嵌入”，而是“衔接”。

const adVideo = document.getElementById('ad-video');
const mainVideo = document.getElementById('main-video');
<p>adVideo.addEventListener('ended', () => {
mainVideo.src = '/videos/main.mp4';
mainVideo.load(); // 必须显式调用 load()
mainVideo.play().catch(e => console.warn('Auto-play prevented:', e));
});</p><p>// 用户点击“播放”按钮时才启动广告
document.getElementById('play-btn').addEventListener('click', () => {
adVideo.play().catch(e => console.warn('Ad play blocked:', e));
});
</p>

注意：load() 不可省略，否则部分浏览器不会重新解析新 src；play() 必须包裹在用户手势回调中，否则在 Chrome/Firefox/Safari 均会失败。

mid-roll 广告需暂停主视频 + 动态替换 src + 手动恢复时间点

mid-roll 是最容易出错的环节。不能只靠 currentTime 设断点，还要处理广告播放期间主视频的“暂停态”和“上下文保存”。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

主视频播放到 60 秒时插广告：监听 timeupdate，当 currentTime >= 60 && !adPlaying 时执行广告逻辑
保存当前主视频时间点：const savedTime = mainVideo.currentTime;，并在广告结束回调里 mainVideo.currentTime = savedTime;
广告视频要加 muted 和 playsinline（iOS Safari 要求），否则可能静音或全屏弹出
不要用 mainVideo.pause() 后立刻换 src，应等 pause 事件确认后再操作，避免状态竞争