CODEWITHSUNDEEP
htmlvideo
Lewis
Lewis

Reputation: 147

insert ads on HTML5 video

How can I insert ads on html5 video tag before the main video plays? Is there any open source tools to make this easier? Is there any reference that can guide me there?

It is working with this code:

<script type="text/javascript">
   // listener function changes src
   function myNewSrc() {
      var myVideo = document.getElementsByTagName('video')[0];
      myVideo.src="../main.webm";
      myVideo.load();
      myVideo.play();
    }

   // function adds listener function to ended event -->

    function myAddListener(){
     var myVideo = document.getElementsByTagName('video')[0];
     myVideo.addEventListener('ended',myNewSrc,false);
    }
</script>

but I can't when it play the second one. It shows the poster. How do I get rid of the poster?

Upvotes: 6

Views: 20150

Answers (5)

Subhan
Subhan

Reputation: 1634

Have you ever watched a video online and seen a banner ad displayed on top of the video? Or watched a video and seen an ad appear halfway through? How about a rich media ad take over the screen when using a mobile app?

This question was asked 8 years ago, Things have changed over the years and now we have protocols like VAST, VPAID, VMAP, and MRAID.

Read about them here.

Upvotes: 1

mehdi jalilvand
mehdi jalilvand

Reputation: 460

@natlee75 For me this didn't work I changed It to this:

$( document ).ready(function() {
var adManager = function () {
    var vid = document.getElementById("vid1564730217"),
        adSrc = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.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);
			
        }
    };
}().init();		
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="vid1564730217" src="http://techslides.com/demos/sample-videos/small.mp4" width="100%" style="max-height:600px;" poster="http://orperry.com/sample/wp-content/uploads/2015/12/sample-logo.png" controls>
	<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Upvotes: 1

natlee75
natlee75

Reputation: 5197

This is a quick off the cuff start of 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 preroll on a particular 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);
        }
    };
}();

There are a number of things that aren't covered here, though. For instance, if you set the init method to be called when you start playing the video, you'll need to keep a flag that indicates whether there's an ad playing so that the play handler won't do anything when you're transitioning from the ad to the content (which requires a "play" event after the load() call in order to get the seamless playback).

We use something similar in our video playing project, and most of the video ad services out there do something like this for HTML based video playback (as opposed to Flash video playback).

It's relatively straightforward, but you just have to make sure to keep track of when event callbacks should be fired and when to add and remove those callbacks.

Another thing to consider is the unreliability of the "ended" event. I haven't yet figured out when and on which platforms it consistently fires, but it's a fairly well known problem. A possible solution is to use "timeupdate" instead and test whether the "currentTime" property is somewhere around a second less than the "duration" property so you know you're right at the end of the video.

Upvotes: 6

brendan
brendan

Reputation: 29986

You may want to look at what Popcorn.js can do. It allows you to interact with Html5 video and overlay text and a lot of other cool things:

http://popcornjs.org/documentation

Upvotes: 2

Jeremy Conley
Jeremy Conley

Reputation: 934

Sorry I can't test this code right now but in theory this should work.

<script>
// you will want to do checking here to see if the browser supports the video element
document.getElementById('video').addEventListener('ended', function()
{
    // the ad finished playing so update the src attribute to the real video
    document.getElementById('video').src = 'mainvideo.webm';
});
</script>

<video id="video" src="ad.webm">
</video>

Upvotes: 2

Related Questions