HTML5 VAST PLAYER Tutorial

Cerchiamo di sviluppare assieme un player video html5 che riprodura advertising vast lineare.

Per testare il player, ci siamo iscritti al servizio di advertising simply.com, che ci ha fornito una url contenente un xml vast 2.0

Vast 2.0 è uno standar del 2010 ma ancora usato fatto per alimentare qualsiasi tipo di player video che possa fare un pò di logica prima di iniziare la riproduzione. Vast 2.0 prevede :

  • Advertising lineare, ovvero preroll midroll e postroll, ovvero spot pubblicitari che partono prima, in mezzo, e alla fine del contenuto
  • Advertising non lineare, ovvero immagini che appaiono in overlay
  • Advertising companion, ovvero aree del sito web che mostrano banner pubblicitari in funzione di alcune indicazioni (ad esempio, il nostro player video tramite il vast andrà a mostrare un banner grafico sulla fiancata del sito)

dobbiamo condurre i seguenti passi

  1. Scaricare il tag VAST
  2. Associare al player video il tag VAST
  3. Fare in modo che il player risponda al click mandando l’utilizzatore nella url indicata dal player VAST

Per scaricare il tag VAST ci viene in aiuto JQuery che ci permetterà di scaricarlo ed analizzarlo con facilità. Dunque scriviamo (perdonate l’indentazione, ma viene persa con l’editor di testo del blog)

$.ajax({
url: “http://optimized-by.simply.com/play.html?code=158197;79913;72403;0&from=”,
success: function(data){
console.log(data);
}
});

e così andremo a scaricare l’xml. l’xml sarà “data” nella risposta alla chiamata, e contiene i seguenti tag

<?xml version="1.0" encoding="UTF-8"?><VAST version="2.0"><Ad><Wrapper><AdSystem>Simply</AdSystem><Impression>http://optimized-by.simply.com/vastlistener.php?event=impression&amp;campaign=18101&amp;adv=135151&amp;space=158197&amp;label=0&amp;method=0&amp;user=54e78b754a7dd3.11704212&amp;geolocation=105&amp;referer=&amp;ord=1424460661346</Impression><Creatives><Creative><Linear><VideoClicks><ClickTracking>http://optimized-by.simply.com/show/MDswOzE1ODE5Nzs3OTkxMzs3MjQwMzsxMzUxNTE7MDsxNDI0NDYwNjYxMDAw/</ClickTracking></VideoClicks></Linear></Creative></Creatives><VASTAdTagURI>http://ads.stickyadstv.com/www/delivery/swfIndex.php?reqType=AdsSetup&amp;protocolVersion=2.0&amp;zoneId=38580</VASTAdTagURI></Wrapper></Ad></VAST>

dunque, in primis abbiamo la versione di VAST. In questo caso è VAST 2.0 ma può essere anche 1.0 o 3.0 , anche se 1.0 probabilmente è deprecato ovunque.

Vast 2.0 è un mondo molto complesso. Un pdf con tutti i dettagli è disponibile qui .

  • Impression è la url da richiamare non appena viene scaricato l’advertising
  • ClickTracking è la url da richiamare al click
  • VASTAdTagURI letteralmente “URL of ad tag of downstream Secondary Ad Server” , non ho ancora capito cosa serve.

Ho preferito mettere il player in una pagina a parte che ho richiamato tramite iframe qui sotto

 

HTML5 VAST PLAYER Tutorial

4 pensieri su “HTML5 VAST PLAYER Tutorial

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *