如何在视频播放器中投放广告？答案

【问题标题】：How do I put ads in a video player?如何在视频播放器中投放广告？
【发布时间】：2021-08-21 08:14:03
【问题描述】：

enter image description here 如何在视频播放器中添加广告并在特定时间播放，播放5秒广告后会自动返回我正在播放的视频。

【问题讨论】：

您可以尝试拥有两个视频对象。一个是播放主视频，另一个是播放广告。使用Timer 函数设置在特定时间播放广告。在每个视频的<style> 设置中使用z-depth 设置来交换图层（用于切换开关）。
您好，先生。你能再给我解释一下吗？我应该怎么做才能在我的视频播放器中播放广告？非常感谢。
您如何投放广告？它们是来自广告服务器还是您提供它们？如上所述，您需要两个
是的，但我将如何将它们添加到我的代码中？我将如何在广告和视频之间切换。或者我应该只制作一个按钮，当我点击广告时会显示，然后如果我再次点击它会切换到我正在播放的原始视频。

标签： html video html5-video ads video-player

【解决方案1】：

正如 VC.One 所说，一种方法是在网页中设置两个视频播放器或视频元素，并在您希望播放广告时从一个切换到另一个。

有关提前准备隐藏视频的示例，然后在播放视频到达某个点时开始播放，请参阅此答案 - 在此示例中，它位于视频的结尾，但可以在您想要的任何时间进行：@ 987654321@

所以你的步骤可以是（网页但你使用与其他平台相同的原则）：

创建两个视频元素
开始播放主视频并加载、暂停和隐藏您的第一个广告视频。
在您希望广告播放时为主视频设置进度回调，并在广告触发时暂停主视频并隐藏该视频元素。
取消隐藏并取消暂停广告视频。
在广告视频结束时，隐藏该视频元素，然后再次取消隐藏和取消暂停您的主视频。
如果您有更多广告，请加载并暂停隐藏视频元素中的下一个广告，然后按上述方法继续。

执行此操作的 Javascript（包含在上面链接的答案中，因此您可以修改和使用 sn-p）非常简单：

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid2.style.display = "none"

vid1.onloadeddata = function() {
    vid1.currentTime = 872;  
    vid1.play()
};

vid2.onloadeddata = function() {
    vid2.currentTime = 10; //Just to illusrate as begining is black screen
    vid2.pause()
};

vid1.onended = function() {
    vid2.play()
    vid1.style.display = "none"
    vid2.style.display = "block"
};

以上内容实际上可用于播放后贴片广告 - 要扮演中间角色，您可以使用“时间更新”事件而不是“结束”事件：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

【讨论】：