Intgration de ladserveur Version 1.

2 12 fvrier 2013

Intgrations Adserveur Videoplaza Advideum

Sommaire
Intgrations Adserveur Videoplaza - Advideum................................................................................................1 Sommaire...........................................................................................................................................................1 I.Intgration pour le web....................................................................................................................................2 A.Player JW....................................................................................................................................................2 B.Player Flowplayer.......................................................................................................................................3 C.Player Brigthcove.......................................................................................................................................3 D.Player Ooyala.............................................................................................................................................4 E.Player OSMF..............................................................................................................................................4 F.Player propritaire.......................................................................................................................................6 II.Intgration VAST...........................................................................................................................................6 III.Intgration pour le mobile.............................................................................................................................9 A.HTML5.......................................................................................................................................................9 B.IOS............................................................................................................................................................10 C.ANDROID................................................................................................................................................10 IV.Intgration Tl Connecte/IPTV...............................................................................................................10

Afin que vous puissiez raliser vos tests, merci d'ajouter les mots cls suivants aux valeur vptags : - vpvalidation : Pour des appels de tags publicitaires la norme vast (simple vido cliquable) - vastvpaid : Pour des appels de tags publicitaires la norme vpaid (vido interactive en flash) Ces mots cls n'ont d'autres but que celui de faire des tests, pensez donc imprativement les retirer lorsque vous serez en production. Le paramtre vptags devra alors rester vide.

Intgration de ladserveur Version 1.2 12 fvrier 2013

I.

Intgration pour le web

A. Player JW

http://www.longtailvideo.com/players/jw-flv-player/ Version payante et gratuite (avec logo) Dans le header ajouter : <script type="text/javascript" src="http://fr-advideum.cdn.videoplaza.tv/contrib/js/jsinjection/vp_inject.js"></script> Ajouter les lignes suivantes dans le code appelant le player. Exemple avec intgration JS : plugins : http://fr-advideum.cdn.videoplaza.tv/resources/as3_bridge_jw_5x.swf", vpdomain : http://fr-advideum.videoplaza.tv", vpshares : Alias_du_Site", Il vous sera communiqu par Advideum vptags : valeur1,valeur2", vpEnvironmentURL","http://fr-advideum.cdn.videoplaza.tv/contrib/fradvideum/environment.xml", vpUseDomainWhitelisting : true" Exemple avec intgration SWFObject : sd.addVariable("plugins","http://fradvideum.cdn.videoplaza.tv/resources/as3_bridge_jw_5x.swf"); sd.addVariable("vpdomain","http://fr-advideum.videoplaza.tv"); sd.addVariable("vpshares","Alias_du_Site"); sd.addVariable("vptags","valeur1,valeur2"); sd.addVariable("vpEnvironmentURL","http://fr-advideum.cdn.videoplaza.tv/contrib/fradvideum/environment.xml"); sd.addVariable("vpUseDomainWhitelisting","true"); Nous recommandons fortement davoir la version 5 de JW. La version 6 nest pas encore compatible avec le plugin (12/02/2013).
Pour intgration dans Wordpress Editer le fichier config XML du player. Il se trouve dans .../wp-content/uploads/jw-playerplugin-for-wordpress/configs/ Supprimer la ligne <fbit.link>true</fbit.link> Dans le tag <plugin> ajouter http://fradvideum.cdn.videoplaza.tv/resources/as3_bridge_jw_5x.swf. Ce qui devrait donner <plugins>fbit-1,tweetit-1,http://fradvideum.cdn.videoplaza.tv/resources/as3_bridge_jw_5x.swf</plugins>

Intgration de ladserveur Version 1.2 12 fvrier 2013

Editer le fichier \wordpress\wp-content\plugins\jw-player-plugin-forwordpress\framework\JWEmbedderConfig.php Ajouter dans la function generateEmbedScript() les lignes suivantes : $script .="\"vpdomain\" : \"http://fr-advideum.videoplaza.tv\", "; $script .="\"vpshares\" : \" \", "; Avec la nouvelle version du plugin de Wordpress, la modification doit se faire la ligne 95 "controlbar" => $this->dim["controlbar"], "vpdomain" => "http://fr-advideum.videoplaza.tv", "vpshares" => "", "vptags" => "", "vpEnvironmentURL" => "http://fr-advideum.cdn.videoplaza.tv/contrib/fradvideum/environment.xml", "vpUseDomainWhitelisting" => "true"

B. Player Flowplayer
http://flowplayer.org/ Version payante et gratuite (avec logo) LURL vers le plugin est versions 3.2.6 et suprieure o http://fr-advideum.cdn.videoplaza.tv/resources/flash/flowplayer3.2.6/latest/vp_plugin.swf versions 3.2.5 et infrieure o http://fr-advideum.cdn.videoplaza.tv/resources/as3_bridge_flowplayer.swf Dans le script appelant le player ajouter le code suivant plugins: { videoplaza: { url: ' http://fr-advideum.cdn.videoplaza.tv/resources/flash/flowplayer3.2.6/latest/vp_plugin.swf ', vpDomain:'http://fr-advideum.videoplaza.tv', vpShares:' Alias_du_Site ', vpTags: ' ', vpEnvironmentURL: 'http://fr-advideum.cdn.videoplaza.tv/contrib/fradvideum/environment.xml' }

C. Player Brigthcove
http://www.brightcove.com/fr/ Uniquement payant, avec CDN 1. Dans le module publicit de Brightcove, slectionner les players concerns. 2. Dans le panneau dition 3. Dans Ad Source: Videoplaza

Intgration de ladserveur Version 1.2 12 fvrier 2013 4. Dans Player-Level Key/Value Pairs mettre vpLoaderURL=http://fradvideum.cdn.videoplaza.tv/resources/boot/as3_videoplaza_bootloader.swf;vpsh ares=Alias_du_Site;tags=;vpEnvironmentURL=http://fradvideum.cdn.videoplaza.tv/contrib/fradvideum/environment.xml;vpUseDomainWhitelisting=true

D.Player Ooyala
Ooyala Backlot > Monetize Tab Ad Source: Videoplaza vpDomain: eg. http://fr-advideum.videoplaza.tv Player level midroll ad breaks: les virgules sparent les valeurs en secondes entre chaque midroll Player level tags: utiliser pour les tests Player level Videoplaza flags: eg. noprerolls Player level shares: Alias_du_Site Maximum length to consider short form content: single value in seconds Tracking Pixel URL: not implemented, configure in Videoplaza Campaign Manager

E. Player OSMF
http://www.opensourcemediaframework.com/ Gratuit, Open source Pour rcuprer codes et exemples : http://www.advideum.com/integration/osmf.zip

Intgration de ladserveur Version 1.2 12 fvrier 2013 Pour intgrer le plugin Vidoplaza vous devez suivre les tapes suivantes Pr-play: Ne pas lancer la vido avant que le plugin Videoplaza plugin ne soit charg et prt. Chargez le plugin via les mthodes du framework OSMF. Crer un objet VPElement avec vos paramtres Videoplaza sous forme de metadata Aprs le chargement du plugin et avant de commencer la lecture de la vido: ajouter votre MediaElement avec un objet metadata contenant les informations requises.

Vous devez ensuite apporter les modifications suivantes Pour rcuprer et couter lAPI du plugin, vous devez couter lvnement "adPlayerAPIReady": // Ecouter quand lAPI Videoplaza est disponible mediaElement.addEventListener("adPlayerAPIReady", onAdPlayerAPIReady); private function onAdPlayerAPIReady( e:Event ):void { videoplazaAPI = e.currentTarget.api; // Ecouter quand le postroll a fini dtre lu videoplazaAPI.addEventListener("vpAdPlayerComplete", onAdPlayerEvent); } Vous pouvez personnaliser le player publicitaire en utilisant les flashvars, vous devez alors les ajouter aux configurations de lobjet cr. Pour contrler le dbut du preroll (au lieu de laisser le plugin le grer), vous devez ajouter la cl/valeur "autoSetNewItem" = false et ensuite appeler videoplazaAPI.setNewItem(itemInfo) vous-mme : var settings:Metadata = new Metadata(); settings.addValue("ID", "vpPlugin"); // Mettre lID du site settings.addValue("vpid", "ID-Site"); settings.addValue("flashvars", flashvars); settings.addValue("vpEnvironmentURL", "http://fradvideum.cdn.videoplaza.tv/contrib/fr-advideum/environment.xml"); settings.addValue("vpUseDomainWhitelisting", "true"); // Ajouter une rfrence linstance du player settings.addValue("player", _mediaPlayer); settings.addValue("autoSetNewItem", false); if( videoplazaAPI ) { var itemInfo:Object = new ItemInfo(); itemInfo.tags = ["vpvalidation", "vastvpaid"]

Intgration de ladserveur Version 1.2 12 fvrier 2013 // Pour indiquer la longueur de la video itemInfo.flags = ["long_form"]; // itemInfo.flags = ["short_form"]; // Videoplaza va envoyer vpAdPlayerReady quand il est prt jouer le preroll videoplazaAPI.addEventListener("vpAdPlayerReady", onAdPlayerReady); // cuePoints est utilize pour inclure des pauses et jouer les midrolls. Lexemple montre 2 midrolls, lun a 30s lautre a 60.23s. itemInfo.cuePoints = [{name:"vpspot", time: 30}, {name:"vpspot", time: 60.23}] // videoplazaAPI.setNewItem(itemInfo) va demander Vidoplaza de faire un appel publicitaire en utilisant les informations continues dans itemInfo videoplazaAPI.setNewItem(itemInfo); // videoplazaAPI.start(); va dclencher le preroll (et la session de publicit) quand il sera prt videoplazaAPI.start(); } Le midroll va se dclencher automatiquement, mais vous pouvez le modifier en appellant calling videoplazaAPI.setAutoTriggerCuePoints(false); avant de commencer la session: videoplazaAPI.setAutoTriggerCuePoints(false);

F. Player propritaire
Pour les players propritaires, un SDK est disponible permettant de grer entirement les interactions entre le player et ladserveur. Vous pouvez rcuprer le SDK, ainsi quun exemple dintgration en CS5 cette adresse : http://www.advideum.com/integration/SDKVP.zip

II.

Intgration VAST

Pour plus dinformation sur la norme VAST : http://www.iab.net/vast Note : Certains environnements ne supporte pas le code charg dynamiquement pour tre excut dans l'application, par exemple les applications crites pour iOS / Android ou certains dcodeurs IPTV. Pour ces environnements, on peut utiliser l'approche VAST la place. VAST diffre de l'approche de plugin sur les points suivants: Vous devez faire un appel de publicit chaque break publicitaire (preroll, midroll, postroll), au lieu de faire un seul appel pour toute la session Vous devez tre en mesure de communiquer un ID pour chaque appel afin que ladserveur puisse les identifier comme une session Les tapes dune session publicitaire sont les suivantes : Crer un appel de publicit preroll (tt=preroll)

Intgration de ladserveur Version 1.2 12 fvrier 2013

Preroll

Analyser la rponse XML VAST et extraire les informations sur les annonces (url vido, impression / click-through, pixel de tracking) Jouer le preroll et tracker les clics. Si l'utilisateur clique sur la publicit, utiliser lURL de clic pour ouvrir la page dans une nouvelle fentre. Si les informations sont disponibles dans le VAST faire des requtes de comptabilisation de lecture en faisant une requte sur les URLs fournies (dbut, 25%, 50%, 75%, 100%) Lorsque le preroll a t entirement jou, lancer la vido de contenu Si vous atteignez un point de repre pour une annonce midroll, crer un nouvel appel publicitaire avec les mme paramtres que pour le preroll mais en changeant la valeur de la variable tt par midroll Mettre en pause la lecture de votre contenu et le reprendre lorsque le midroll a t jou. Lorsque vous arrivez la fin de lecture de votre contenu crer un nouvel appel publicitaire avec les mmes paramtres que prcdement, mais en changeant la valeur de la variable tt par postroll. Rptez le processus danalyse du XML et l'affichage de la publicit. Fin de session

Tag VAST pour tests http://fr-advideum.videoplaza.tv/proxy/distributor/v2? s=Alias_du_Site&tt=p&rt=vast_2.0&rnd={random}&pf=fl_11&t=vpvalidation

Postroll

http://fr-advideum.videoplaza.tv/proxy/distributor/v2? s=Alias_du_Site&tt=po&rt=vast_2.0&rnd={random}&pf=fl_11&t=vpvalidation tt : type de publicit, preroll, midroll, postroll shares (ou s) : identifiant du site tags (ou t): ajouter un mot-cl (vpvalidation, vastvpaid) flags : short_form ou long_form suivant la dure de la vido de contenu [RANDOM] : modifier par un nombre alatoire gnr automatiquement [ID_SESSION] : modifier par un ID unique aux 3 appels (preroll, midroll, postroll ) pour une mme vido de contenu

Exemple de rponse VAST <VAST version="2.0" xsi:noNamespaceSchemaLocation="http://service.videoplaza.com/schema/iab/vast2.0.xsd"> <Ad id="b16b5cd5-7133-4057-b58d-6dda5849afb4"> <InLine> <AdSystem>Videoplaza Monetizer</AdSystem> <AdTitle>The VAST preroll</AdTitle> <Impression>http://se-showroom.videoplaza.tv/proxy/tracker?sid=e8847228-0a6c47...</Impression>

Intgration de ladserveur Version 1.2 12 fvrier 2013 <Impression>http://example.com/123.gif?rnd=1302863942011</Impression> <Creatives> <Creative> <Linear> <Duration>00:00:30</Duration> <TrackingEvents> <Tracking event="start">http://se-showroom.videoplaza.tv/proxy/tracker? sid=e8847228-0a6...</Tracking> <Tracking event="firstQuartile">http://se-showroom.videoplaza.tv/proxy/tracker? sid=e8847...</Tracking> <Tracking event="midpoint">http://se-showroom.videoplaza.tv/proxy/tracker? sid=e8847228...</Tracking> <Tracking event="thirdQuartile">http://se-showroom.videoplaza.tv/proxy/tracker? sid=e884... </Tracking> <Tracking event="complete">http://se-showroom.videoplaza.tv/proxy/tracker? sid=e884722...</Tracking> </TrackingEvents> <VideoClicks> <ClickThrough>http://se-showroom.videoplaza.tv/proxy/tracker?sid=e8847228-0a6c47...</ClickThrough> </VideoClicks> <MediaFiles> <MediaFile bitrate="434" delivery="progressive" height="270" scalable="true" type="video/x-flv" width="480">http://seshowroom.cdn.videoplaza.tv/creatives/5524066b-7dfe-40f1-8...</MediaFile> <MediaFile bitrate="434" delivery="progressive" height="270" scalable="true" type="video/x-flv" width="480">http://seshowroom.cdn.videoplaza.tv/creatives/f70029fa-a2fe-4b4b-8...</MediaFile> </MediaFiles> </Linear> </Creative> <Creative> <CompanionAds> <Companion id="7703a45c-a9cf-4e6c-b982-ed5d2142b49a" height="250" width="300"> <HTMLResource><a href="http://se-showroom.videoplaza.tv/proxy/tracker? sid=e8847228-0a6c-47..." target="_blank" alt=""><img src="http://seshowroom.cdn.videoplaza.tv/creatives/8d7161c8-6e1b-487d-8..." width="300" height="250" border="0" /></a><img src='http://seshowroom.videoplaza.tv/proxy/tracker?sid=e8847228-0a6c-47...'/> </HTMLResource> </Companion> </CompanionAds> </Creative> </Creatives> <Extensions> <Extension type="CustomTracking" name="Videoplaza Custom Ids"/> </Extensions> </InLine>

Intgration de ladserveur Version 1.2 12 fvrier 2013 </Ad> </VAST>

III.

Intgration pour le mobile

A. HTML5

Documentation : SDK + Demo : http://www.advideum.com/integration/html5/SDK_HTML5.zip Exemple : http://cuisine.journaldesfemmes.com/recette/324798-pate-a-crepe Note : Sur les environnements iOS, le clic sur la publicit nest pas pris en compte. Le lecteur de lOS prend compltement la main sur la lecture vido et ignore le javascript embarqu. Prrequis Le player doit tre construit en HTML5. Le player doit utiliser un lment vido avec un id. La player doit utiliser un tat pr-lecture. La vido ne doit pas dbuter tant que le plugin nest pas charg. Le plugin doit tre initialis avec lid de llment vido. Nous recommandons de garder la diffusion en Flash sur le web. Le dveloppeur doit grer la dtection du device et appeler le player HTML5 Videoplaza si ncessaire. Nous recommandons dajouter le mot-cl : novpaid au paramtre vptags pour tre sr de ne pas diffuser du Flash. Les vnements obligatoirement remonts : Inventaire Impression pub Clic sur pub Dbut dune cra Atteinte de 25%, 50%, 75% et 100% de la pub

Intgration de ladserveur Version 1.2 12 fvrier 2013 Fin de la cra

B. IOS

C. ANDROID
Le SDK Android sera disponible courant Q2 2013 et pourra tre communiqu ensuite par simple demande.

IV.

Intgration Tl Connecte/IPTV

Dans le cas dune intgration IPTV ou tl connecte notre adserveur est directement intgr dans lapplication en relation avec votre prestataire, via lAPI de notre adserveur. Les vidos sont alors pousses dans le CDN du FAI (ou du prestataire technique) avec lID de ladserveur. Quand une publicit doit tre servies lID de la campagne est renvoye par ladserveur, le FAI rcupre alors la vido correspondante dans son CDN

Intgration de ladserveur Version 1.2 12 fvrier 2013 (ou celui du prestataire) et la lit. Videoplaza est dj intgr dans plusieurs applications IPTV et Tl connecte.