This is a quick start cuff for a solution that should at least point you in the right direction. This gives you a singleton with an init method that, when called, sets up a preset for a specific video element.
var adManager = function () { var vid = document.getElementById("myVid"), adSrc = "videos/epic_rap_battles_of_history_16_adolf_hitler_vs_darth_vader_2_1280x720.mp4", src; var adEnded = function () { vid.removeEventListener("ended", adEnded, false); vid.src = src; vid.load(); vid.play(); }; return { init: function () { src = vid.src; vid.src = adSrc; vid.load(); vid.addEventListener("ended", adEnded, false); } }; }();
However, there are a number of things that are not considered here. For example, if you set the init method, which will be called when the video starts playing, you will need to specify a flag indicating whether the game will be so that the playback handler does nothing when you switch from an ad for content (which requires "play" playback after calling load () to get continuous playback).
We use something similar in our video game project, and most video ads out there do something similar to play HTML-based videos (as opposed to playing Flash videos).
It's relatively simple, but you just need to keep track of when to activate event callbacks and when to add and remove these callbacks.
Another thing to consider is the unreliability of a “completed” event. I still do not understand when and on which platforms it constantly works, but this is a pretty well-known problem. A possible solution is to use "timeupdate" instead and check if the currentTime property is somewhere about a second less than the "duration" property, so you know you're right at the end of the video.