Search code examples
javascriptjqueryhtmlvideomediaelement

How can I add a Image / DIV on playing HTML 5 Video (like Youtube Advertisement)?

I use the MediaElement.js HTML 5 Video Player and I want to add a Advertisement (like Youtube Add) over my Videos between the playing time (like: the add fadein at 0:20s and fadeout at 0:30s - add visible: 10s).

Did someone do something like this? thanks!

Solution

  • One way would be to change the source of the video at currentTime 20s of the video, playing the 10sec Add and than changing back to the original source of the video.

    Problem here is that anyone could move to the end of the add and skip it since people can just use the controls of the video tag.

    Unless you know a way to block the controls this wouldn't be an optimal solution.

    (Removing controls="controls" isn't a solution either since you can add it back trough inspector.)