April 10th, 2012. В рубрике
Advertising,
Development.
No comments.
This post is also available in:
Russian
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 scriptzone is an OpenX zone ID used to fetch ads fromposition 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.
Looking forward to your comments.
