HTML5 Video VAST Plug-In

Posted on by

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.

Leave a Reply