0

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.

olan kendrick
  • 9
  • 4
  • You could try having two video objects. One is playing the main video, the other is playing the advert. Use a `Timer` function to set advert playback at a specific time. Use `z-depth` setting in each video's ` – VC.One Jun 03 '21 at 09:46
  • hello Sir. Can you explain it to me further? What should I do to play an ads in my video player?thank you very much. – olan kendrick Jun 06 '21 at 14:35
  • how are you serving the ads? are they coming from an ad server or are you delivering them? as mentioned above you'd want two – Offbeatmammal Jun 08 '21 at 06:51
  • Yes, but how will I add them in my code? How am I going to swap between the ads and the video. or should I just make a button that when I click the ads will show then if I click again it will switch with the original video that I'm playing. – olan kendrick Jun 09 '21 at 07:18

1 Answers1

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

Mick
  • 24,231
  • 1
  • 54
  • 120