问题描述
enter image description here 如何在视频播放器中添加广告并在特定时间播放,播放5秒广告后会自动返回我正在播放的视频。
解决方法
正如 VC.One 所说,实现此目的的一种方法是在网页中使用两个视频播放器或视频元素,并在您想要播放广告时从一个切换到另一个。
有关隐藏视频的示例,请参阅此答案,了解预先准备好的隐藏视频,然后在播放视频到达某个点时开始播放 - 在此示例中,它是在视频的结尾,但可以是您想要的任何时间:{ {3}}
所以您的步骤可以是(网页,但您在其他平台上使用相同的原则):
- 创建两个视频元素
- 开始播放您的主要视频,然后加载、暂停和隐藏您的第一个广告视频。
- 在您希望广告播放时为主视频设置进度回调,当广告触发时,暂停主视频并隐藏该视频元素。
- 取消隐藏和取消暂停广告视频。
- 在广告视频结束时,隐藏该视频元素,然后再次取消隐藏和取消暂停您的主视频。
- 如果您有更多广告,请加载并暂停隐藏视频元素中的下一个广告,然后继续如上。
执行此操作的 Javascript(包含在上面链接的答案中,因此您可以修改和使用代码段)非常简单:
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://stackoverflow.com/a/58269415/334402