HTML5 Video VAST Plug-In

This post is also available in: Russian

Video Ads HTML5

Today, almost every video content site is using inline advertising. However, no one would bother to say today of some upcoming massive shift from Adobe Flash Player to alternative solutions. Still, the HTML5 <video> tag is evidently becoming a matter of growing interest. Hence the issue of enabling advertising in the new context is emerging. Here we will show you a sample code of HTML5 video VAST plug-in to enable ads with a "clean" <video> tag.

In our posts, we have many times mentioned the OpenX ad server. In the basic OpenX Video Plugin installation, the server outputs video ads in the VAST format that defines ad content parameters and methods used to respond to user actions. The timeframes to show an overlay or inline ad are defined by the video player. Therefore, we have to configure our OpenX server, prepare videos and create an HTML page to enable viewing. Here you can find a screen cast describing how to launch an advertising campaign using OpenX. Below we are going to discuss how to create a viewing page.

So let’s assume we have an HTML5 page containing a video embedded using a <video> tag:

<!DOCTYPE html>
 <html>
 <head>
   <title>HTML5 javascript OpenX plug-in example</title>
 </head>
 <body>
	<video id="example_video_1" src="content/bbb.mp4"
			width="640" height="480" controls />

 </body>
</html>

We are going to interrupt playback by showing video ads. Let’s add an ‘ads’ attribute to the <video> tag containing all the necessary information:

ads = ' {  "servers": [
                 {
                    "apiAddress": "http://example.com/openx/www/delivery/fc.php"
                 }
            ],
           "schedule": [
                 {
                    "zone": "11",
                    "position": "pre-roll"
                 },
                 {
                    "zone": "11",
                    "position": "mid-roll",
                    "startTime": "00:00:08"
                 },
                 {
                    "zone": "11",
                    "position": "mid-roll",
                    "startTime": "00:06:00"
                 },
                 {
                    "zone": "11",
                    "position": "post-roll"
                 }
            ]
         }'

The parameters we have entered are quite intuitive:

  • 1
    apiAddress

    is the URL of your OpenX server ad delivery script

  • 1
    zone

    is an OpenX zone ID used to fetch ads from

  • 1
    position

    defines ad type (pre-roll, mid-roll, post-roll)

  • 1
    startTime

    is a start time of the ad relating to the main video timeline (for mid-rolls, format – ‘hh: mm: ss’)

Having attached

1
html5videovastplugin.js

, add the

1
initAdsFor (&quot;example_video_1&quot;)

function call using our <video> element ID as a parameter. After that, our page code will look as follows:

<!DOCTYPE html>
  <html>
  <head>
    <title>HTML5 javascript OpenX plug-in example</title>
    <script src="html5videovastplugin.js"></script>
  </head>
  <body>

   <video id="example_video_1" src="content/bbb.mp4"
   width = "640" height="480" controls
   ads = ' {  "servers": [
                 {
                    "apiAddress": "http://example.com/openx/www/delivery/fc.php"
                 }
            ],
           "schedule": [
                 {
                    "zone": "11",
                    "position": "pre-roll"
                 },
                 {
                    "zone": "11",
                    "position": "mid-roll",
                    "startTime": "00:00:08"
                 },
                 {
                    "zone": "11",
                    "position": "mid-roll",
                    "startTime": "00:06:00"
                 },
                 {
                    "zone": "11",
                    "position": "post-roll"
                 }
            ]
         }'     />

   <script>initAdsFor("example_video_1");</script>

 </body>
 </html>

View sample

Please also note that currently the situation with format support by browsers is as follows:

  • H.264 (MP4), AAC – Safari 3.0+, Chrome 5.0+, iOS 3.0+, Android 2.0+, IE 9.0+
  • Theora (OGG), Vorbis – FireFox 3.5+, Chrome 5.0+, Opera 10.5+
  • VP8 (WebM),Vorbis – IE 9.0+, FireFox 4.0+, Chrome 6.0+, Opera 10.6+,

So, please be careful while preparing your videos and ads.

The current version of the JavaScript module can be downloaded from the project page http://labs.denivip.ru/projects/html5videovastplugin.

Looking forward to your comments.

11 thoughts on “HTML5 Video VAST Plug-In

  1. I’ve been looking for a solution close to this for a few weeks now. Your info has proven very helpful. I was able to render my own version as a test very successfully base on your code. Have you attempted to call the plugin from a video player? I’m trying to do it with JWplayer, but so far it overrides the plugin and just plays the video content.

  2. I’m trying to figure out how this script works and I put the files from the repository on a web server. Unfortunately the video plays but the ad doesn’t show up. I’m a beginner with ad servers issues and I just wondered if there’s any sort of restrictions that prevents ads showing up if the code from your repository has been ran from a different domain (other than denivip.ru)
    Thank you so much!
    Tania

  3. Xavi, we’ve uploaded this plugin to Github. You can get it here: https://github.com/denivip/html5-video-vast-plugin

    Tania, are there any error messages in Firebug or WebInspector? They will help you to find out the origin of the issue. By the way I appologize that your OpenX server and page are on different domains. They should be placed on the same domain due to crossdomain requests restrictions.

  4. Hi Team, I\\’m trying to demo,pre-roll video runing but your HTML5 Video VAST Plug-In code don\\’t tracking event of video. Like play, mute, sound, 25%, 50%, … You can support a problem. Thanks

  5. Hi, you’re having a CORS issue. Please read about the HTML5 CORS policy. You will need to tweak your JS code a little bit (set withCredentials property to true) and your server side code as well (put some headers). Hope the answer helps.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box