Search This Blog

Friday, April 13, 2012

HTML5 Video VAST Plug-In

HTML5 Video VAST Plug-In:


HTML5 Video VAST Plug-In

April 10th, 2012. В рубрике AdvertisingDevelopmentNo comments.
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:
  • apiAddress is the URL of your OpenX server ad delivery script
  • zone is an OpenX zone ID used to fetch ads from
  • position defines ad type (pre-roll, mid-roll, post-roll)
  • startTime is a start time of the ad relating to the main video timeline (for mid-rolls, format – ‘hh: mm: ss’)
Having attached html5videovastplugin.js, add the initAdsFor ("example_video_1")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>
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 pagehttp://labs.denivip.ru/projects/html5videovastplugin.
Looking forward to your comments.

No comments:

Post a Comment