fr | en | es | de

Appendix: Rich Media Plug-ins

New!
Discover the latest tools in the Analytics Suite, thanks to our new online help.

Contents: ShowHide

Plug-in for HTML5 audio and video tags

New video and audio tags have been added to the HTML5 recommendations that have been drawn up by W3C. These different items can be used to simplify the integration of multimedia content into HTML or XHTML documents. AT Internet has a Rich Media plug-in which can be used to easily tag this type of tags. The Rich Media plug-in collects data which provides information on the different actions that Internet users perform on the players that are associated with each tag, and then generate hits for the Rich Media measurement.

The majority of the values which are used for normal Rich Media tagging need to be entered directly into the HTML5 tags.

For further information on Rich Media tagging please go to the following section: Implementation and tagging > Specific tags > Rich Media.

Step 1: Implementing the xtvarm.js file

The Rich Media plug-in is made up of an xtvarm.js JavaScript file. You need to retrieve this file and then place it in your site's tree structure.

Step 2: Creating a call to the xtvarm.js file

The call to the xtvarm.js file needs to be added to your pages' source code which contain audio and/or video tags, and should be added just under the call to the xtcore.js script:

Step 3: Integrating Rich Media variables

The Rich Media variables have been renamed, and can be seen in the table below. As soon as the variables have been entered, they need to be added to the audio and/or video tags in question.

For further information on the different Rich Media identifiers please go to the following section: Annexes > Rich Media Identifiers.

Important

Launching this process depends on whether Rich Media variables are present in the different tags or not.

Examples of integrating variables

*Tagging a traditional video:

Note

We recommend that several different formats be used (mp4, oga, etc.) to ensure maximum browser compatibility.

*Tagging a post-roll advertising video:

*Tagging an audio track:

YouTube player plug-in

The "YouTube" player is an Internet media player which has been developed in Flash and which can be accessed online. The "YouTube" player has an interface which can be monitored by the JavaScript language. The plug-in which AT Internet has to offer can be used to retrieve Rich Media data that has been provided by the player. This plug-in can also be used to collect data associated with actions that have been performed by Internet users on the player, and to generate hits for the Rich Media measurement.

By calling a piece of Flash animation from a web browser, it is possible to associate the browser with several variables thanks to the use of a parameter known as "flashvars". Most of the values which are required for the function "xt_rm(A,B,C,D, ,F,G,H, ,J,K,L,M,N)", and which are used for classic Rich Media tagging, must be entered.

Step 1: Implementing the xtytrm.js file

The Rich Media plug-in is made up of an xtytrm.js JavaScript file. This file needs to be retrieved and placed in your site's tree structure.

Step 2: Creating a call to the xtytrm.js file

The call to the xtytrm.js file needs to be added to the source code of your pages which contain a YouTube player, and should be added just under the call to the xtcore.js script:

Step 3: Integrating Rich Media variables

The Rich Media variables have been renamed. For further information on the different variables that exist please refer to the table in the previous section: Plug-in for HTML5 audio and video tags (Step 3).

As soon as the variables have been entered, they need to be added to the animation's "flashvars" parameter.

Note

"Move" actions which are linked to the displacement of the reader's read head are not detected by the plug-in.

For further information on the different Rich Media identifiers please go to the following section: Annexes > Rich Media Identifiers.

Step 4: Activating the "YouTube" API

By adding specific variables to the "YouTube" player it is possible to monitor playback in JavaScript.

• In order to activate "YouTube's" JavaScript API interface, the following parameter needs to be added to the player's URL:

• You also need to add a parameter to the same URL so that the player, which is currently being used, can be identified:

Important

In order for "YouTube's" JavaScript API to function properly users must have Flash Player version 8 (or later) installed on their computer.

Implementation examples

Example 1: using a JavaScript constructor for the effective use of a player.

A JavaScript variable known as "flashvarsAT" must be declared. This variable contains all of the different Rich Media values.

Example 2: directly inserting the player into a page's source code (HTML version).

The "flashvars" parameter must be added to both the "PARAM" and "EMBED" tags.

Plug-ins for the JW FLV Media Player v4.x

The "JW FLV Player" is an Internet media player which has been developed in Flash. It is able to read several different types of formats including: FLV, MP4, MP3, AAC, JPG, PNG and GIF. In addition to this it supports RTMP and HTTP protocols, live streaming, different playlist formats and also has a wide range of parameters on offer. It is also possible to monitor this player thanks to the use of the JavaScript or ActionScript languages. The plug-in that AT Internet has to offer can be used to retrieve Rich Media data that is provided by the "JW FLV" player. This plug-in can also be used to collect data associated with the different actions that Internet users perform on the player, and to generate hits for the Rich Media measurement.

By calling a piece of Flash animation from a web browser, it is possible to associate the browser with several variables thanks to the use of a parameter known as "flashvars".  Most of the values which are required for the function "xt_rm(A,B,C,D,E,F,G,H,I,J,K,L,M,N)", and which are used for classic Rich Media tagging, must be entered.

For further information on Rich Media tagging please go to the following section: Implementation and tagging > Specific tags > Rich Media.

Version 4.x

Important

The JavaScript plug-in works for version 4.x of the JW player.

Step 1: Implementing the xtjwrm.js file

The Rich Media plug-in is made up of an xtwrm.js JavaScript file. This file needs to be retrieved and placed in your site's tree structure.

Step 2: Creating a call to the xtjwrm.js file

The call to the xtwrm.js file needs to be added to your pages' source code which contain a JW player (which can be downloaded from its official site), and should be added just under the call to the xtcore.js script:

Important

The file must be downloaded onto your server; any direct call from the LongTail site is not authorised.

Step 3: Integrating the Rich Media variables

The Rich Media variables have been renamed. For further information on the different variables that exist please refer to the table in the following section: Plug-in for HTML5 audio and video tags (Step 3).

As soon as the variables have been entered, they need to be added to the animation's "flashvars" parameter.

For further information on the different Rich Media identifiers please go to the following section: Annexes > Rich Media Identifiers.

Step 4: Activating the measurement

Addition of the "tracecall" function

A feature known as "tracecall", which is used to trace the Player's activity, is available for version 4 of the Player. This feature has been added by developers so that users can easily retrieve JavaScript data which provides information on the changes that have made to the player's status ("Play", "Stop", etc).

• In order to activate the plug-in the "tracecall" variable needs to be added to the animation's "flashvars" parameter:

Addition of the "xtTrace" method

"xtTrace" is the name of the main method that is used by the plug-in. For each action that a user performs on the player, the "tracecall" function reacts and uses AT Internet's "xtTrace" method which makes it possible to generate Rich Media hits.

• A block of JavaScript code which contains the "xtTrace" feature needs to be added above each piece of animation that is to be tracked.

player: Player ID (must correspond to the animation's ID parameter)

null: does not need to be modified

str: does not need to be modified

Important

You need to add as many "xtTracex" functions as there are JW players to be measured (where x corresponds to the number of the player).

Example 1: your source code contains a player with the ID "player1". In this example the following block of code needs to be added above the code of the FLASH object in question:

You then need to insert the following line into the animation's "flashvars" parameter:

Example 2: your source code contains two players. The ID of the first player is "player1" and the ID of the second player is "player2".

In this example the following block needs to be added above the code of the first FLASH object:

You then need to insert the following line into the animation's "flashvars" parameter:

The following block of code should be added above the second FLASH object:

Finally, the following line needs to be added to the "flashvars" parameter which belongs to the second piece of animation:

Implementation examples

Example 1: the use of a JavaScript constructor for the effective use of a player.

A JavaScript variable known as "flashvarsAT" must be declared. This variable contains all the different Rich Media values.

Example 2: directly inserting the player into a page's source code (HTML version).

The "flashvars" parameter must be added to both the "PARAM" and "EMBED" tags.

Plug-ins for versions 5.3 and later of the JW FLV Media Player

For versions 5.3 and later, JWPlayer provides a JavaScript API associated with the media player. The more recent the version of the media player, the more features the API will contain, for example buffering is only possible with versions 5.7 and later, whereas move actions were not measured before version 5.6. The first two steps remain the same: the xtjwrm.js file on the page containing the media player must be declared:

<script language="javascript" src="xtjwrm.js"></script>

You must also call the jwplayer.js file made available by the LongTail, which you will have already downloaded onto your server (this file can sometimes be named jwplayer-min.js):

<script language="javascript" src="jwplayer.js"></script>

Important

- These 2 files must be placed between the page’s HEAD tags. One implementation method uses a feature defined in the xtjwrm.js file and must be declared beforehand.
- The xtjwrm file (versions 2.0.001 and later) is not compatible with tagging for versions 4x and earlier of the player which require versions 1.0.00x of the xtjwrm.js file

2 different methods can be used to carry out the measurement. For each of the methods to be used, the variables which are important to our measurement must be declared:

• xtplayer :media player ID
  
• type :content type (video, audio or vpost)
  
• xtn2 :level 2 site which content is stored in
  
• richname :content label (use "::" if necessary) or a post-roll advert (in this case do not use "::")
  
• clink :content label associated with an advert (if used, if not used leave empty).
  
• refresh :duration of refresh actions performed on the player (optional variable, measured in seconds).
  
• duration :total content duration, measured in seconds (leave empty if mode="live")
  
• stream :Feed ID (see appendices)
  
• location :location (int or ext)
  
• mode :broadcast type (live or clip)
  
• size :content size (in Kb, leave empty if mode=live)
  
• extension:content format (ID, see appendices)

Implementation examples version 5.x.

Example 1: using the API contained in the jwplayer.js file

<head>

<script type="text/javascript" src="jwplayer.js"></script>

<script type="text/javascript" src="xtjwrm.js"></script>

</head>

…

<div id="idplayer"> Player Loading... </div>

<script type="text/javascript">

// xtPlaylist must be a global variable

if(typeof xtPlaylist == 'undefined'){var xtPlaylist = new Array;}

 xtPlaylist['idplayer'] = [

{type:'video',xtn2:'1',richname:'my_video',clink:'',refresh:'10',duration:'337',stream:'3',location:'int',mode:'clip',size:'34295',extension:'15'}];

jwplayer('idplayer').setup({

flashplayer:'http://www.site.com/player.swf',

file:'http://www.site.com/video.mp4',

height: 240,width: 320,

xtplayer:'my_player',

events: {

onReady: function() {

xtjw_init(jwplayer('idplayer'));

}}});

</script>

...

The URLs, in orange, containing the names of the player and video must be replaced with the actual names.

Example 2: using a generic insert method (SWFObject): the swfobject.js file must be downloaded and called from your page in the header.

<head>

<script type="text/javascript" src="jwplayer.js"></script>

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript" src="xtjwrm.js"></script>

</head>

…

<div id="container"> Player Loading... </div>

<script type="text/javascript">

if(typeof xtPlaylist == 'undefined'){var xtPlaylist = new Array;}

 xtPlaylist['idplayer'] = [

{type:'video',xtn2:'1',richname:'my_video',clink:'',refresh:'10',duration:'337',stream:'3',location:'int',mode:'clip',size:'34295',extension:'15'}];

var flashvars = { file:'http://www.site.com/video.mp4'};

var params = { allowfullscreen:'true', allowscriptaccess:'always' };

var attributes = {

id:'idplayer',

name:'idplayer',

xtplayer:'my_player',};

swfobject.embedSWF('http://www.site.com/player.swf', 'container', 320, 240, '9.0.115', 'false', flashvars, params, attributes, playerLoaded);

function playerLoaded(e){ xtjw_init(jwplayer(e.ref));}

</script>

...

The URLs, in orange, containing the names of the player and video must be replaced with the actual names.

Implementation examples version 6 and later

<head>

<script type="text/javascript" src="jwplayer.js"></script>

<script type="text/javascript" src="xtjwrm.js"></script>

</head>

…

<div id="idplayer"> Player Loading... </div>

<script type="text/javascript">

// xtPlaylist must be a global variable

if(typeof xtPlaylist == 'undefined'){var xtPlaylist = new Array;}

 xtPlaylist['idplayer'] = [

{type:'video',xtn2:'1',richname:'my_video',clink:'',refresh:'10',duration:'337', stream:'3',location:'int',mode:'clip',size:'34295',extension:'15'}];

jwplayer('idplayer').setup({

file:'http://www.site.com/video.mp4',

height: 240,width: 320,

xtplayer:'my_player'

});

jwplayer('idplayer').onReady(xtjw_init(jwplayer('idplayer')));

</script>

...

The URLs, in orange, containing the names of the player and video must be replaced with the actual names

Plug-ins for versions 5.3 and later of the JW FLV Media Player with Playlist

In this section we have given different examples of playlist measurements to complete what was described in the previous section. Further information on playlists is available on the LongTail site.

For example, let’s consider the playlist implementation method using the xml file as follows:

<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/">

  <channel>

    <title>My Playlist title</title>

    <item>

      <title>Video 1</title>

      <media:content url="http://www.site.com/video1.mp4" />

      <media:thumbnail url="http://www.site.com/thumbnail1.jpg" />

      <description>Video 1 is great</description>

      <jwplayer:duration>90</jwplayer:duration>

    </item>

    <item>

      <title>Video 2</title>

      <media:content url="http://www.site.com/video2.mp4" />

      <media:thumbnail url="http://www.site.com/thumbnail2.jpg" />

      <description>Video 2 is wonderful</description>

      <jwplayer:duration>120</jwplayer:duration>

    </item>

    <item>

      <title>Video 3</title>

      <media:content url="http://www.site.com/video3.avi" />

      <media:thumbnail url="http://www.site.com/thumbnail2.jpg" />

      <description>Video 3 is the best</description>

      <jwplayer:duration>180</jwplayer:duration>

    </item>

  </channel>

</rss>

Implementation examples version 5.x.

Example 1: using the API contained in the jwplayer.js file

<head>

<script type="text/javascript" src="jwplayer.js"></script>

<script type="text/javascript" src="xtjwrm.js"></script>

</head>

…

<div id="idplayer"> Player Loading... </div>

<script type="text/javascript">

// xtPlaylist must be a global variable

if(typeof xtPlaylist == 'undefined'){var xtPlaylist = new Array;}

 xtPlaylist['idplayer'] = [

{type:'video',xtn2:'1',richname:'playlist::my_video1',clink:'',refresh:'10',duration:'90',stream:'3',location:'int',mode:'clip',size:'34295',extension:'9'},

{type:'video',xtn2:'1',richname:'playlist::my_video2',clink:'',refresh:'10',duration:'120',stream:'3',location:'int',mode:'clip',size:'53295',extension:'9'},

{type:'video',xtn2:'1',richname:'playlist::my_video3',clink:'',refresh:'10',duration:'180',stream:'3',location:'int',mode:'clip',size:'65295',extension:'10'}];

jwplayer('idplayer').setup({

flashplayer:'http://www.site.com/player.swf',

playlistfile:'http://www.site.com/playlist.xml',

'playlist.position':'right',

'playlist.size':'150',

controlbar:'over',

repeat:'list',

height: 200, width: 350,

xtplayer:'my_player',

events: {

onReady: function() {

xtjw_init(jwplayer('idplayer'));

}}});

</script>

The order used to define the xtPlaylist variable is extremely important and must be respected:

xtPlaylist[‘idplayer’] = [{data video 1},{data video 2},{data video 3},{Etc…}] ;

Example 2: using a generic insert method (SWFObject): the swfobject.js file must be downloaded and called from your page in the header.

<head>

<script type="text/javascript" src="jwplayer.js"></script>

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript" src="xtjwrm.js"></script>

</head>

…

<div id="container"> Player Loading... </div>

<script type="text/javascript">

if(typeof xtPlaylist == 'undefined'){var xtPlaylist = new Array;}

 xtPlaylist['idplayer'] = [

{type:'video',xtn2:'1',richname:'playlist::my_video1',clink:'',refresh:'10',duration:'90',stream:'3',location:'int',mode:'clip',size:'34295',extension:'9'},

{type:'video',xtn2:'1',richname:'playlist::my_video2',clink:'',refresh:'10',duration:'120',stream:'3',location:'int',mode:'clip',size:'53295',extension:'9'},

{type:'video',xtn2:'1',richname:'playlist::my_video3',clink:'',refresh:'10',duration:'180',stream:'3',location:'int',mode:'clip',size:'65295',extension:'10'}];

var flashvars = {

playlistfile:'http://www.site.com/playlist.xml',

'playlist.position':'right','playlist.size':'150',

controlbar:'over',repeat:'list'};

var params = {allowfullscreen:'true', allowscriptaccess:'always' };

var attributes = {

id:'idplayer',

name:'idplayer',

xtplayer:'my_player',};

swfobject.embedSWF('http://www.site.com/player.swf', 'container', 350, 200, '9.0.115', 'false', flashvars, params, attributes, playerLoaded);

function playerLoaded(e){

xtjw_init(jwplayer(e.ref));

}

</script>

…

Implementation examples version 6 and later

<head>

<script type="text/javascript" src="jwplayer.js"></script>

<script type="text/javascript" src="xtjwrm.js"></script>

</head>

…

<div id="idplayer"> Player Loading... </div>

<script type="text/javascript">

// xtPlaylist must be a global variable

if(typeof xtPlaylist == 'undefined'){var xtPlaylist = new Array;}

 xtPlaylist['idplayer'] = [

{type:'video',xtn2:'1',richname:'playlist::my_video1',clink:'',refresh:'10',duration:'90', stream:'3',location:'int',mode:'clip',size:'34295',extension:'9'},

{type:'video',xtn2:'1',richname:'playlist::my_video2',clink:'',refresh:'10',duration:'120', stream:'3',location:'int',mode:'clip',size:'53295',extension:'9'},

{type:'video',xtn2:'1',richname:'playlist::my_video3',clink:'',refresh:'10',duration:'180', stream:'3',location:'int',mode:'clip',size:'65295',extension:'10'}];

jwplayer('idplayer').setup({

playlist:'http:// www.site.com/playlist.xml',

listbar: {

        position: 'right',

        size: 120

    },

height: 300, width: 480,

xtplayer:'my_player'

});

jwplayer('idplayer').onReady(xtjw_init(jwplayer('idplayer')));

</script>

The order used to define the xtPlaylist variable is extremely important and must be respected:

xtPlaylist[‘idplayer’] = [{data video 1},{data video 2},{data video 3},{Etc…}] ;

FlowPlayer plug-in

FlowPlayer is a Flash video player. FlowPlayer can be easily customised and configured with JavaScript or any other Flash. More information is available on the FlowPlayer website: http://flowplayer.org/.

This Rich Media plug-in collects data related to the different actions that users perform on the FlowPlayer, and also generates hits for the Rich Media module. The Rich Media plug-in is made up of both an SWF file (flowplayer.ATRichmedia.swf) and a flowplayer-3.2.6.min.js JavaScript file. Both these files can be downloaded directly from the NX interface by going to Support centre > Resources > Technical documents > Rich Media > Rich Media tagging guide.

STEP 1: Inserting the FLASH FLOWPLAYER player

Insert the Flash file, provided by FlowPlayer, into your site’s custom tree structure.

STEP 2: Adding the measurement files

Add the flowplayer.ATRichmedia.swf and flowplayer-3.2.6.min.js JavaScript files to your site’s tree structure.

STEP 3: Calling the JavaScript file

Make a call to the JavaSCRIPT file within the HEAD tag as shown below:

<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>

STEP 4: Integrating the Rich Media variables

The objective is to enter most of the values which are required by the "xt_rm(A,B,C,D, ,F,G,H,I,J,K,L,M,N)" function, the function which is used for normal Rich Media tagging.

The standard Rich Media variables have been renamed. For further information on the different variables that exist please refer to the table in the following section: Plug-in for HTML5 audio and video tags (Step 3).

Adding a playlist

There are several different methods which can be used to insert clips into the player. Due to technical reasons, associated with data collection, the different media must be added in the form of a “playlist”.

A FlowPlayer “playlist” is created in JavaScript. A range of different implementation examples are available at the following web address: http://flowplayer.org/documentation/configuration/index.html

With this “playlist” or “object”, it is then possible to add custom properties for each piece of media, which will then be retrieved by the AT plug-in during playback.

Adding the plug-in

A FlowPlayer player is easy to use, thanks primarily to a JavaScript constructor:

A “playlist” must be declared as an object and be added as the JavaScript constructor’s third parameter:

The Rich Media plug-in must also be added as an object, after the “playlist” object:

The “xtplayer” variable corresponds to the player’s ID, and is a useful piece of information to have, should several different players be used on the same web page.

IMPLEMENTATION EXAMPLE

This code will only work if the page to be tracked is placed on a page that contains the xtcore.js file. The folders containing the swf and js files then need to be adapted according to your site.

Plug-in for Dailymotion

In partnership with Dailymotion, AT Internet offers you the opportunity to measure all of your videos that are hosted on the site. Unlike other plug-ins you do not have to host the code: the Dailymotion team will take care of everything. You just need to provide the team with your site’s configuration so that the measurement is carried out correctly.

Step 1: contact Dailymotion

Send an email to the following address to set the measurement in place: content-support@dailymotion.com.

Step 2: provide the team with your site’s configuration.

Depending on the site that you would like to measure you need to provide Dailymotion with the following information:

- Your site ID (value of the “xtsite” for a standard web tag)

- The data collection subdomain (value of the “xtsd” for a standard web tag)

- The data collection domain “xxxx.xxxx” in your case. The value must be changed if you use another domain (contact our Support centre).

- A level 2 site ID (optional): this information should only be transmitted if you want to store the playbacks in different level 2 sites (value of the “xtn2” for a standard web tag)

A value for the refresh: this value will force a call to our servers every X seconds to show that the playback is in progress. X must be expressed in seconds and cannot be less than 5. It is optional but strongly recommended to refine playback duration.

www.atinternet.com/support
© AT Internet - 2016 - All rights reserved