![\"Video](\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/02\/vae_banner.png\" "\\"vae_banner\\"")
<\/a><\/center><\/p>\nToday, 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. <\/p>\n
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<\/a> 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.<\/p>\n So let’s assume we have an HTML5 page containing a video embedded using a <video> tag:<\/p>\n 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:<\/p>\n The parameters we have entered are quite intuitive:<\/p>\n is the URL of your OpenX server ad delivery script<\/li>\n is an OpenX zone ID used to fetch ads from<\/li>\n defines ad type (pre-roll, mid-roll, post-roll)<\/li>\n is a start time of the ad relating to the main video timeline (for mid-rolls, format — ‘hh: mm: ss’)<\/li>\n<\/ul>\n Having attached<\/p>\n , add the<\/p>\n function call using our <video> element ID as a parameter. After that, our page code will look as follows:<\/p>\n<!DOCTYPE html>\r\n <html>\r\n <head>\r\n <title>HTML5 javascript OpenX plug-in example<\/title>\r\n <\/head>\r\n <body>\r\n\t<video id="example_video_1" src="content\/bbb.mp4"\r\n\t\t\twidth="640" height="480" controls \/>\r\n\r\n <\/body>\r\n<\/html><\/pre>\n
ads = ' { "servers": [\r\n {\r\n "apiAddress": "http:\/\/example.com\/openx\/www\/delivery\/fc.php"\r\n }\r\n ],\r\n "schedule": [\r\n {\r\n "zone": "11",\r\n "position": "pre-roll"\r\n },\r\n {\r\n "zone": "11",\r\n "position": "mid-roll",\r\n "startTime": "00:00:08"\r\n },\r\n {\r\n "zone": "11",\r\n "position": "mid-roll",\r\n "startTime": "00:06:00"\r\n },\r\n {\r\n "zone": "11",\r\n "position": "post-roll"\r\n }\r\n ]\r\n }'<\/pre>\n\n
<\/div><\/td>
<\/div><\/td>
<\/div><\/td>
<\/div><\/td>
<\/div><\/td>
<\/div><\/td><!DOCTYPE html>\r\n <html>\r\n <head>\r\n <title>HTML5 javascript OpenX plug-in example<\/title>\r\n <script src="html5videovastplugin.js"><\/script>\r\n <\/head>\r\n <body>\r\n\r\n <video id="example_video_1" src="content\/bbb.mp4"\r\n width = "640" height="480" controls\r\n ads = ' { "servers": [\r\n {\r\n "apiAddress": "http:\/\/example.com\/openx\/www\/delivery\/fc.php"\r\n }\r\n ],\r\n "schedule": [\r\n {\r\n "zone": "11",\r\n "position": "pre-roll"\r\n },\r\n {\r\n "zone": "11",\r\n "position": "mid-roll",\r\n "startTime": "00:00:08"\r\n },\r\n {\r\n "zone": "11",\r\n "position": "mid-roll",\r\n "startTime": "00:06:00"\r\n },\r\n {\r\n "zone": "11",\r\n "position": "post-roll"\r\n }\r\n ]\r\n }' \/>\r\n\r\n <script>initAdsFor("example_video_1");<\/script>\r\n\r\n <\/body>\r\n <\/html><\/pre>\n