How Do I Put Ads In A Video Player?

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.

Solution 1:

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.

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):

• Create two video elements
• Start your main video playing and load and pause and hide your first ad video.
• set a progress callback for the main video at the time you want your ad to play and when it triggers, pause the main video and hide that video element.
• unhide and unpause the ad video.
• At the end of the ad video, hide that video element and unhide and unpause your main video again.
• If you have more ads, load and pause the next ad in the hidden video element and continue as above.

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"
};

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