如何在视频播放器中投放广告? [英] How do I put ads in a video player?

问题描述

在此处输入图片说明如何在视频播放器中添加广告并在特定时间播放，播放5秒广告后会自动返回我正在播放的视频.

enter image description here How to add ads in video player and play it in a specific time, after playing a 5 sec ads it will automatically return to the video that I'm playing.

推荐答案

正如 VC.One 所说，一种方法是在网页中有两个视频播放器或视频元素，然后从一个切换到另一个何时播放您的广告.

As VC.One says, one way to do this is to have two video players, or video elements in a web page, and switch from one to the other when you want your ad to play.

有关隐藏视频的示例，请参阅此答案，了解预先准备好的隐藏视频，然后在播放视频到达某个点时开始播放 - 在此示例中，它位于视频的结尾，但可以在您想要的任何时间:https://stackoverflow.com/a/58269415/334402

See this answer for an example of a hidden video being prepared in advance and then starting when the playing video reaches a certain point - in this example it is at the end of the video but it could be any time you want: https://stackoverflow.com/a/58269415/334402

所以您的步骤可以是(网页，但您在其他平台上使用相同的原则):

So your steps can be (web page but you use same principles with other platforms):

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

执行此操作的 Javascript(包含在上面链接的答案中，因此您可以修改和使用代码段)非常简单:

The Javascript to do this (included in the answer linked above so you can modify and play round with the snippet) is quite straightforward:

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

The above can actually be used to play a post roll ad - to play a mid role you would use 'time update' event rather than the 'ended' event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

这篇关于如何在视频播放器中投放广告?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！