OVATest3





Minimal Setup | LongTail Video | Home of the JW Player







Open Video Ads




Minimal Setup








Purpose

This guide explores how to setup OVA for JW5 with a minimum set of configuration options.

Contents

  1. Introduction
  2. Working Example
  3. Using short-cut variables with JW Embedder
  4. Using short-cut variables with OBJECT/EMBED tags
  5. The short-cut Variables
    1. ova.tag
    2. ova.json
    3. ova.debug
    4. ova.delayAdRequestUntilPlay

    5. ova.allowPlaylistControl

Recommended Reading

1. Introduction

While OVA provides a myriad of configuration options that allow the delivery of video ads to be highly customised, it also provides a set of short-cut
variables to allow OVA to be setup with a minimum of fuss. At the very minimum this allows a simple pre-roll to be delivered with a single OVA config option.

2. Working Example

The following example illustrates OVA delivering a pre-roll via a single ova.tag config option:

Embed code:

Resulting player:

3. Using short-cut variables with JW Embedder

The following code snippet illustrates how to use short-cut variables with the JW Embedder. In this example, the ova.tag short-cut is used.

jwplayer("container").setup({
       flashplayer: "player.swf",
       height: 254,
       width: 320 
       file: "http://streaming.openvideoads.org:81/shows/the-black-hole.mp4", 
       duration: 10, 
       plugins: {
           "ova-jw": { "tag": "http://my-ad-server.com/ad-tag.php?format=vast" } 
       }
});

In this example a single ad-tag is provided. OVA takes this ad tag and configures:

  • A pre-roll ad slot
  • An optional 300×250 companion banner that will be shown in a DIV region with a pre-declared id of “companion-300×250”

When the short-cut variables are used with the JW Embedder, the preceding “ova” element of the variable name is dropped – so “ova.tag” simply becomes “tag” as per the illustration above.

4. Using short-cut variables with OBJECT/EMBED tags

The following code snippet illustrates how to configure OVA via short-cut variables with OBJECT/EMBED tags:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="300" id="player">
<PARAM NAME=movie VALUE="player.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#000000>
<PARAM NAME=allowfullscreen VALUE="true">
<PARAM NAME=allowscriptaccess VALUE="always">
<PARAM NAME=flashvars VALUE="plugins=ova-jw&ova.tag=http%3A%2F%2Fmy-ad-server.com%2Fad-tag.php">
<EMBED
 id="player"
 data="player.swf"
 src="player.swf"
 width="450"
 height="300"
 allowscriptaccess="always"
 allowfullscreen="true"
 flashvars="plugins=ova-jw&ova.tag=http%3A%2F%2Fmy-ad-server.com%2Fad-tag.php"
>
</EMBED>
</OBJECT>

Note: Always make sure the ova short-cut variables values are URLEncoded for safety before being placed into a single “flashvars” definition.
For example, in the illustration above, the ad tag http://my-ad-server.com/ad-tag.php
becomes http%3A%2F%2Fmy-ad-server.com%2Fad-tag.php after being URLEncoded.

5. The short-cut variables

The following short-cut variables have been provided by OVA to short-circuit the configuration process:

  • ova.tag
  • ova.json
  • ova.debug
  • ova.delayAdRequestUntilPlay
  • ova.autoPlay
  • ova.allowPlaylistControl

5.1 ova.tag

The most direct way to setup OVA to play a pre-roll is via the “ova.tag” short-cut.
The “ova.tag” variable is expanded into a standard OVA linear pre-roll configuration
and optional 300×250 companion banner with pre-declared DIV id “companion-300×250”.

As a result, the following config:

jwplayer("container").setup({
       flashplayer: "player.swf",
       height: 254,
       width: 320 
       file: "http://streaming.openvideoads.org:81/shows/the-black-hole.mp4", 
       duration: 10, 
       plugins: {
           "ova-jw": { "tag": "http://my-ad-server.com/ad-tag.php?format=vast" } 
       }
});

When parsed by OVA, internally becomes the following long-form definition:

jwplayer("container").setup({
       flashplayer: "player.swf",
       height: 254,
       width: 320 
       file: "http://streaming.openvideoads.org:81/shows/the-black-hole.mp4", 
       duration: 10, 
       plugins: {
           "ova-jw": { 
               "ads": {
                   "companions": {
                      "regions": [
                         {
                            "id": "companion-300x250",
                            "width": 300,
                            "height": 250
                         }
                      ]
                   },
                   "schedule": [ 
                      {
                         "position": "pre-roll",
                         "tag": "http://my-ad-server.com/ad-tag.php?format=vast"
                      }
                   ]
               } ,
               "debug": {
                   "levels": "fatal, config, vast_template"
               }
           }
       }
});

5.2 ova.json

“ova.json” allows a full OVA JSON config to be ingested with a single variable.
This option is useful when embedding JW Player into content management systems such as WordPress.

The following code snippet illustrates how it is used with SWFObject:

<script type="text/javascript>
  var so = new SWFObject('player.swf','ply1','320','240','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('bgcolor','#000000');
  so.addParam('name','tutorial');
  so.addParam('id', 'tutorial');
  so.addParam('flashvars','plugins=http://static.openvideoads.org/downloads/
               jw5x/ova.swf&id=tutorial&playlist=none&repeat=none&
               &file=http://content.bitsontherun.com/test-stream.mp4&
               ova.json=%7B+%22blockUntilOriginalPlaylistLoaded%22%3A+%22
               true%22%2C+%22autoPlay%22%3A+%22false%22%2C+%22overlays%22
               %3A+%7B+%22regions%22%3A+%5B+%7B+%22id%22%3A+%22bottom%22
               %2C+%22verticalAlign%22%3A+%22bottom%22%2C+%22horizontalAlign
               %22%3A+%22center%22%2C+%22backgroundColor%22%3A+%22transparent
               %22%2C+%22width%22%3A+320%2C+%22height%22%3A+80+%7D+%5D+%7D
               %2C+%22ads%22%3A+%7B+%22servers%22%3A+%5B+%7B+%22type%22%3A+
               %22OpenX%22%2C+%22apiAddress%22%3A+%22http%3A%2F%2Fopenx.
               openvideoads.org%2Fopenx%2Fwww%2Fdelivery%2Ffc.php%22+%7D+
               %5D%2C+%22displayCompanions%22%3A+true%2C+%22companions
               %22%3A+%5B+%7B+%22id%22%3A%22companion%22%2C+%22width
               %22%3A%22200%22%2C+%22height%22%3A%22240%22+%7D+%5D%2C+
               %22schedule%22%3A+%5B+%7B+%22zone%22%3A+%2247%22%2C+%22
               position%22%3A+%22pre-roll%22+%7D%2C+%7B+%22zone%22%3A+
               %2248%22%2C+%22position%22%3A+%22bottom%22%2C+%22width
               %22%3A+320%2C+%22height%22%3A+80%2C+%22startTime%22%3A+
               %2200%3A00%3A05%22%2C+%22duration%22%3A+%2215%22+%7D+
               %5D+%7D+%7D');
  so.write('player1');
</script>

It looks a mess, but that’s simply because it is the raw JSON configuration processed as follows:

The config is specified on a single line

The resulting line of config is URL encoded

The raw JSON configuration on a single line (before being URL encoded) appears as follows:

{ "blockUntilOriginalPlaylistLoaded": "true", "autoPlay": "false", "overlays": { "regions": [ { "id": "bottom", "verticalAlign": "bottom", "horizontalAlign": "center", "backgroundColor": "transparent", "width": 320, "height": 80 } ] }, "ads": { "servers": [ { "type": "OpenX", "apiAddress": "http://openx.openvideoads.org/openx/www/delivery/fc.php" } ], "displayCompanions": true, "companions": [ { "id":"companion", "width":"200", "height":"240" } ], "schedule": [ { "zone": "47", "position": "pre-roll" }, { "zone": "48", "position": "bottom", "width": 320, "height": 80, "startTime": "00:00:05", "duration": "15" } ] } }

A simple approach to URL encode the JSON string so that it can be inserted directly is to use a script that provides a URL encoding function. An example is PHP – to URL encode that string, the following PHP code would be used:

<?php>
<echo urlencode('.... the JSON raw config string goes in here ....');
?>

The result is as follows:

%7B+%22blockUntilOriginalPlaylistLoaded%22%3A+%22true%22%2C+%22autoPlay%22%3A+%22false%22%2C+%22overlays%22%3A+%7B+%22regions%22%3A+%5B+%7B+%22id%22%3A+%22bottom%22%2C+%22verticalAlign%22%3A+%22bottom%22%2C+%22horizontalAlign%22%3A+%22center%22%2C+%22backgroundColor%22%3A+%22transparent%22%2C+%22width%22%3A+320%2C+%22height%22%3A+80+%7D+%5D+%7D%2C+%22ads%22%3A+%7B+%22servers%22%3A+%5B+%7B+%22type%22%3A+%22OpenX%22%2C+%22apiAddress%22%3A+%22http%3A%2F%2Fopenx.openvideoads.org%2Fopenx%2Fwww%2Fdelivery%2Ffc.php%22+%7D+%5D%2C+%22displayCompanions%22%3A+true%2C+%22companions%22%3A+%5B+%7B+%22id%22%3A%22companion%22%2C+%22width%22%3A%22200%22%2C+%22height%22%3A%22240%22+%7D+%5D%2C+%22schedule%22%3A+%5B+%7B+%22zone%22%3A+%2247%22%2C+%22position%22%3A+%22pre-roll%22+%7D%2C+%7B+%22zone%22%3A+%2248%22%2C+%22position%22%3A+%22bottom%22%2C+%22width%22%3A+320%2C+%22height%22%3A+80%2C+%22startTime%22%3A+%2200%3A00%3A05%22%2C+%22duration%22%3A+%2215%22+%7D+%5D+%7D+%7D

To hook that into the player/OVA setup script, an “ova.config” parameter is used in the flashvars setting.

In our example, the appropriate setup code then takes the form:

....
so.addParam('flashvars', 'plugins=ova-jw&ova.config=%7b+%22.....'); 
....

5.3 ova.debug

It is possible to quickly declare the OVA debug levels required via the “ova.debug” short-cut as follows:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="300" id="player">
<PARAM NAME=movie VALUE="player.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#000000>
<PARAM NAME=allowfullscreen VALUE="true">
<PARAM NAME=allowscriptaccess VALUE="always">
<PARAM NAME=flashvars VALUE="plugins=ova-jw&ova.tag=http%3A%2F%2Fmy-ad-server.com%2Fad-tag.php&ova.debug=fatal,config,vast_template">
</OBJECT>

For a full account of the OVA debug levels and process, please consult the Debugging OVA guide.

5.4 ova.delayAdRequestUntilPlay

To trigger OVA to delay the first ad request until the play button is pressed by the viewer, use the “ova.delayAdRequestUntilPlay” short-cut as follows:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="300" id="player">
<PARAM NAME=movie VALUE="player.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#000000>
<PARAM NAME=allowfullscreen VALUE="true">
<PARAM NAME=allowscriptaccess VALUE="always">
<PARAM NAME=flashvars VALUE="plugins=ova-jw&ova.tag=http%3A%2F%2Fmy-ad-server.com%2Fad-tag.php&ova.delayAdRequestUntilPlay=true">
</OBJECT>

For more information regarding the operation of OVA ad calls, please consult the Loading on Demand and Refreshing guide.

5.5 ova.allowPlaylistControl

Playlist control can be quickly turned on with OVA via the “ova.allowPlaylistControl” option as follows:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="300" id="player">
<PARAM NAME=movie VALUE="player.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#000000>
<PARAM NAME=allowfullscreen VALUE="true">
<PARAM NAME=allowscriptaccess VALUE="always">
<PARAM NAME=flashvars VALUE="plugins=ova-jw&ova.tag=http%3A%2F%2Fmy-ad-server.com%2Fad-tag.php&ova.allowPlaylistControl=true">
</OBJECT>

For further information regarding OVA and JW Playlists, please consult the Working with Playlists guide.