Componente Video Player di YouTube. .Guida allo

Transcript

.Guida all'implementazione per le agenzie creative.
.Agosto 2011.
.Componente Video Player di YouTube.
.Guida allo sviluppo.
Introduzione.
Utilizzi già YouTube per caricare tutti i tuoi video? Lo utilizzi per ottenere una migliore copertura e promuovere il
trailer di un nuovo film in uscita, per ottenere visualizzazioni ripetute degli spot televisivi che stai promuovendo al
momento oppure solamente per ospitare video di carattere generale e contenuti legati alla pubblicità? Se è così,
perché non utilizzare il nostro componente Video Player di YouTube per inserire quegli stessi video anche nelle
creatività Rich Media?
Il componente Video Player di YouTube ti permette inoltre di utilizzare la versione scura dello sfondo di YouTube o
la versione chiara, in modo da poter scegliere quella più adatta per il resto della tua creatività.
.Componente Video Player di YouTube.
Il componente Video Player di YouTube ti permette di utilizzare un duplicato del video player di YouTube completo
di tutti i controlli che utilizzi quando riproduci un normale video di YouTube, come le annotazioni, la funzione a
schermo intero e i controlli di impostazione della qualità. In alternativa, se desideri creare controlli grafici
personalizzati, puoi utilizzare l'API completa del video player di YouTube, in modo da poter inserire direttamente il
video e includere solamente i controlli desiderati, posizionarli dove preferisci e conferire loro l'aspetto desiderato.
Il nostro componente Video Player di YouTube consente inoltre di utilizzare tutte le metriche di tracciamento
DoubleClick Rich Media a cui sei abituato con le normali creatività video Rich Media da registrare. Di conseguenza,
sono disponibili la funzione completa di tracciamento per il numero di visualizzazioni video, riproduzioni, messa in
pausa, interazioni con il volume e persino il numero di visualizzazioni che hanno raggiunto il 25%, il 50%, il 75% o il
100% del video, nonché tutte le normali metriche Rich Media standard. Qualora ciò non fosse sufficiente,
utilizzando il componente, qualsiasi visualizzazione del tuo video avviata da un utente all'interno della creatività
provoca la registrazione del conteggio delle visualizzazioni per il tuo video anche all'interno di YouTube. In questo
modo, le creatività Rich Media contribuiscono davvero a sfruttare il potenziale lato virale della tua campagna.
.IMPORTANTE.. Le visualizzazioni dei video di YouTube vengono conteggiate SOLAMENTE se un utente
interagisce con il pulsante Play predefinito di YouTube, che viene visualizzato al centro della creatività, oppure con il
pulsante di riproduzione presente nel menu di controllo predefinito situato nell'angolo inferiore sinistro del player.
I video di riproduzione automatica non vengono contati.
.IMPORTANTE. Se si utilizzano controlli video personalizzati, il conteggio delle visualizzazioni video di YouTube
non verrà MAI compromesso e nemmeno aumenterà per le visualizzazioni video avvenute all'interno della
creatività, anche qualora non venissero avviate dall'utente.
.Solo AS3.
YouTube ha ufficialmente considerato obsoleta la propria API AS2. Di conseguenza, pur essendo ancora
funzionante la versione AS2 dell'API non è più supportata da YouTube o DoubleClick. Pertanto, di seguito riportiamo
la documentazione completa in merito a come utilizzare il componente Video Player di YouTube versione AS3,
incluse informazioni sull'intera API AS3.
Il componente Video Player di YouTube può essere utilizzato con tutti i nostri formati Rich Media AS3 e la presente
Guida descrive il relativo processo di utilizzo. Per ulteriori informazioni su come sviluppare creatività Rich Media AS3
con DoubleClick Studio, visita il nostro Centro assistenza .qui.
.NOTA.. Per altre domande, contatta [email protected].
.Utilizzo del componente.
1..Scarica il componente di YouTube .qui.
2.. Una volta scaricato, installa il componente facendo doppio clic sul file mxp scaricato, quindi accetta le condizioni
nella finestra di Extension Manager visualizzata.
.NOTA.. In alternativa, aprendo Flash e andando nel menu ?, puoi selezionare Gestisci estensioni dall'elenco a discesa, quindi cerca il file mxp che
hai scaricato e selezionalo per installarlo.
3.. Apri Flash e inizia un nuovo progetto AS3.
4.. Apri la finestra dei componenti e, dal menu Innovazione DoubleClick AS3, trascina il componente Video Player di
YouTube dalla finestra allo stage.
5.. Ridimensiona e posiziona il componente dove desideri all'interno della tua creatività.
6.. Copia e incolla il seguente snippet di codice ActionScript nel relativo livello. Ciò consente di attivare la
funzionalità a schermo intero, ma anche di attivare correttamente tutte le metriche di tracciamento Rich Media.
import com.google.ads.studio.innovation.youtube.player.YTPlayerEvent;
import com.google.ads.studio.innovation.youtube.player.proxy.YTPlayer;
//Enable fullscreen
Security.allowDomain("www.youtube.com");
Security.allowDomain("s.ytimg.com");
Security.allowDomain("*");
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_PLAY, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.PLAYER_READY, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_COMPLETE, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_0_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_0_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_PAUSE, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_REPLAY, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_MUTE, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_UNMUTE, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_FULLSCREEN, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_EXIT_FULLSCREEN, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_QUALITY_CHANGE, eventHandler);
function eventHandler(event:Object):void {
switch (event.type) {
case YTPlayerEvent.PLAYER_READY :
break;
case YTPlayerEvent.VIDEO_PLAY :
Enabler.counter("YTVideo Click to Play");
break;
case YTPlayerEvent.VIDEO_COMPLETE :
break;
case YTPlayerEvent.VIDEO_0_PERCENT :
Enabler.counter("YTVideo Percent 0");
break;
break;
case
case
case
case
case
case
case
case
case
case
case
case
case
case
break;
YTPlayerEvent.VIDEO_75_PERCENT :
break;
YTPlayerEvent.VIDEO_100_PERCENT :
break;
YTPlayerEvent.AUTOPLAY_VIDEO_0_PERCENT :
Enabler.counter("YTVideo Autoplay Percent 0");
break;
break;
break;
break;
break;
YTPlayerEvent.VIDEO_PAUSE :
Enabler.counter("YTVideo Pause");
break;
YTPlayerEvent.VIDEO_REPLAY :
Enabler.counter("YTVideo Replay");
break;
YTPlayerEvent.VIDEO_MUTE :
Enabler.counter("YTVideo Mute");
break;
YTPlayerEvent.VIDEO_UNMUTE :
Enabler.counter("YTVideo Unmute");
break;
YTPlayerEvent.VIDEO_FULLSCREEN :
Enabler.counter("YTVideo Fullscreen Entered");
break;
YTPlayerEvent.VIDEO_EXIT_FULLSCREEN :
break;
YTPlayerEvent.VIDEO_QUALITY_CHANGE :
Enabler.counter("YTVideo Quality Change");
break;
.NOTA.. Un file di esempio che utilizza il componente è disponibile .qui.
.NOTA.. Le istruzioni Case possono essere utilizzate per attivare azioni ed eventi personalizzati. Di conseguenza, non esitare a modificare le
funzioni se desideri che la creatività esegua azioni specifiche al completamento del video, quando viene messo in pausa, viene attivato l'audio e
così via.
7.. Seleziona il componente che hai aggiunto sullo stage e assegnagli il nome istanza ytp aprendo la finestra
Proprietà e aggiungendolo al campo Nome istanza.
8.. Con la finestra Proprietà ancora aperta, vai nei parametri del componente e individua la proprietà videoId.
Quindi, inserisci l'ID video di YouTube per il video che desideri visualizzare nella creatività.
.NOTA.. Puoi trovare l'ID video di YouTube aprendo il video in YouTube, ad esempio qui .http://www.youtube.com/watch?v=HwylTXMSftE. Alla
fine dell'URL, puoi vedere un codice a 11 caratteri, che segue sempre v=. Si tratta dell'ID video di YouTube per il tuo video e, secondo l'esempio
precedente, dovresti digitare HwylTXMSftE nella proprietà del parametro del componente videoId.
9.. Dopo aver pubblicato il file FLA, dovresti vedere il video di YouTube inserito nella tua creatività. Per ulteriori
informazioni sugli altri parametri del componente, consulta la sezione Parametri componente riportata di seguito.
.Parametri componente.
Tutte queste impostazioni possono essere modificate dai parametri del componente nella finestra Proprietà per il
componente Video Player di YouTube. Ma possono anche essere tutte chiamate utilizzando l'API. Per i dettagli,
consulta Esempio di utilizzo dell'API, di seguito.
>. autoCrop:Boolean - Crops the black bars which may be displayed within the video during playback.
Esempio di utilizzo dell'API:
ytp.autoCrop = true;
.NOTA.. NON è supportato nella versione 0. Se attivi questa opzione nella versione 0, l'IDE di Flash si arresta in modo anomalo durante il
tentativo di compilazione.
.NOTA.. Se utilizzato con la versione 1, si verifica un problema con l'immagine in miniatura, che appare distorta quando il player non è impostato
per la riproduzione automatica.
>. autoHideControls:Boolean - Hides the video control bar but reappears when the user hovers over the video
player.
ytp.autoHideControls = true;
>. autoPlayType:String - Set the video to automatically play with or without sound or alternatively have the video
require the user to click it in order for it play
none: nessuna riproduzione automatica. Quando l'utente fa clic sul video, viene avviato il conteggio delle
visualizzazioni di YouTube.
preview: riproduzione automatica con audio disattivato con un pulsante sovrapposto che attiva il conteggio
delle visualizzazioni di YouTube all'interazione da parte dell'utente.
standard: riproduzione automatica con audio attivato senza pulsante sovrapposto e non attiva il conteggio
delle visualizzazioni di YouTube.
//valid values "none" "preview" "standard"
ytp.autoPlayType = "preview";
.NOTA.. La versione 1 NON supporta l'opzione di riproduzione automatica standard con audio attivato.
>. hdOnFullscreen:Boolean - Enabling this option will set the video playback quality to 720p, if this video quality is
available, when the user enters fullscreen mode.
ytp.hdOnFullscreen = true;
>. playerType:String - There are currently two versions of the player. Embedded e Chromeless. Il player di tipo
Embedded è il video player di YouTube così come lo vedi su YouTube, completo di controlli video, mentre il player di
tipo Chromeless è il video player di YouTube senza controlli video, in modo da darti la possibilità di creare controlli
personalizzati.
//valid values "embedded" "chromeless"
ytp.playerType = "embedded";
.NOTA.. La versione 1 NON supporta il player di tipo Chromeless.
>. previewDuration:Number (seconds) - When the autoPlayType setting is set to "preview", this is the duration
the video will play for.
ytp.previewDuration = 18;
.NOTA.. Per la versione 1 del player, al momento è valido SOLAMENTE 30.
>. showInfo:Boolean - Displays the video title and upload information when the user hovers over the video
ytp.showInfo = false;
.NOTA.. La versione 1 NON supporta questa impostazione.
>. suggestedQuality:String - The playback quality of the video.
//valid values "default" "small" "medium" "large" "hd720"
ytp.suggestedQuality = "hd720";
>. theme:String - The skin theme of the player
//valid values "light" "dark"
ytp.theme = "dark";
>. version:uint - The YouTube Player Component supports two versions. La versione 0 carica una soluzione più
vecchia e collaudata, mentre la versione 1 predefinita carica la nuova soluzione.
//valid values 0 1
ytp.version = 0;
.NOTA.. Tieni presente che attualmente consigliamo di utilizzare la versione 0, in quanto la versione 1 presenta ancora alcuni bug e, sebbene li
stiamo correggendo velocemente, non possiamo garantire che vengano corretti tutti prima della data in cui la tua creatività deve essere attiva.
>. videoId:String - The YouTube video ID.
ytp.videoId = "HwylTXMSftE";
.Componente Video Player di YouTube:.
.Metodi e proprietà dell'API.
Oltre ai parametri del componente, esistono molti altri metodi dell'API che possono essere chiamati e utilizzati nel
codice ActionScript. Di seguito, vengono illustrati nei dettagli.
>. clickToContinueText:String - The text displayed to the user when the video reaches the preview duration limit.
The default text for this is Click to Continue.
ytp.clickToContinueText = "Click to watch the full video";
>. clickForSoundText:String - The text displayed to the user during the preview playback. The default text for this is
Click for Sound.
ytp.clickForSoundText = "Click to play with sound";
>. color:String - The color of the progress bar
//valid values:"red" "white"
ytp.color = "white";
>. customThumbUrl:String - Displays a specified image as the thumbnail icon for the video, instead of the default
image chosen when the video was uploaded to YouTube.
//valid value is either a filename or a full URL
ytp.customThumbUrl = Enabler.getFilename("myImage.jpg");
>. destroy():void - This function destroys the YouTube Player instance.
ytp.destroy();
.NOTA.. Devi sempre richiamare ytp.destroy() per annullare il caricamento di un player di YouTube. Questa funzione chiude l'oggetto NetStream
e interrompe il download di altri video dopo che è stato annullato il caricamento del player. Se il tuo codice contiene ulteriori riferimenti al file
SWF del player, dovrai rimuovere anche questi riferimenti separatamente quando annulli il caricamento del player.
.Altri metodi dell'API.
Effettuando direttamente l'accesso al componente proxy, diventano disponibili diverse funzioni, che possono
essere utilizzate per controllare il player di YouTube tramite ActionScript. Di seguito, vengono illustrate nei dettagli.
>. pause():void - Pauses the currently playing video.
ytp.proxy.pause();
>. play():void- Plays the currently cued or loaded video.
ytp.proxy.play();
.NOTA.. Ricorda che YouTube conta solamente le riproduzioni avviate tramite un pulsante Play nativo nel player di tipo Embedded o Chromeless.
>. replay():void - Replays the current video.
ytp.proxy.replay();
>. mute():void - Mutes the currently playing video.
ytp.proxy.mute();
>. unMute():void - Unmutes the currently playing video.
ytp.proxy.unMute();
>. cueVideoById(videoId:String):void - Loads the specified video's thumbnail and prepares the player to play the
video. Il player carica effettivamente il video solamente dopo che è stata chiamata la funzione play().
ytp.proxy.cueVideoById("HwylTXMSftE");
.NOTA.. La versione 1 presenta dei problemi con il tracciamento degli eventi che non vengono attivati correttamente dopo l'utilizzo di questo
metodo.
>. loadVideoById(videoId:String):void - Loads and plays the specified video.
ytp.proxy.loadVideoById("HwylTXMSftE");
.NOTA.. La versione 1 presenta dei problemi con il tracciamento degli eventi che non vengono attivati correttamente dopo l'utilizzo di questo
metodo.
>. loadVideo():void - Will load a video based on properties which have already been set. Quindi, se hai la necessità
di sostituire i video una volta iniziata la riproduzione del video iniziale, puoi semplicemente modificare le proprietà e
chiamare questo metodo invece di creare una nuova istanza del player.
ytp.proxy.loadVideo();
.NOTA.. Supportato SOLAMENTE nella versione 1.
Il componente Video Player di YouTube possiede anche tre metodi statici che possono essere chiamati in qualsiasi
momento, anche senza dover creare o inizializzare l'oggetto player di YouTube. Per questo motivo, le funzioni
devono essere chiamate utilizzando YTPlayer invece del proxy. Di seguito riportiamo questi metodi e un esempio di
come utilizzarli e chiamarli.
>. pauseAllVideos():void - Pauses all currently playing videos.
>. muteAllVideos():void - Mutes all currently playing videos.
>. destroyAllVideos():void - Destroys all currently playing videos.
function exitClicked(e:MouseEvent) {
YTPlayer.pauseAllVideos();
}
my_btn.addEventListener(MouseEvent.CLICK, exitClicked);
.NOTA.. Questo componente mette automaticamente in pausa tutti i video quando si verifica un clic di uscita; di conseguenza, l'utilizzo di queste
funzioni è limitato.
.Se non si utilizza il componente.
Che cosa succede se non desideri utilizzare il componente drag-and-drop, ma preferisci creare il tutto utilizzando
ActionScript e file ActionScript esterni? Puoi tranquillamente scegliere questo approccio.
var ytp:YTPlayer = new YTPlayer();
addChild(ytp);
ytp.width = 320;
ytp.height = 180
ytp.version = 0;
ytp.proxy.videoId = "7BOhDaJH0m4";
ytp.proxy.autoPlayType = "preview";
ytp.proxy.autoHideControls = true;
.NOTA.. Tutti i metodi, le funzioni e gli utilizzi dell'API descritti in precedenza valgono anche per questo approccio.
Un file FLA di esempio è disponibile .qui.
.Utilizzo dell'API AS3 di YouTube.
Il componente Video Player di YouTube è stato sviluppato utilizzando l'API di YouTube e, di conseguenza, è possibile
utilizzare con esso tutte le funzioni dell'API del player di YouTube.
L'API AS3 completa di YouTube è disponibile .qui. Tuttavia, il modo di contattare il player di YouTube è leggermente
diverso.
Per chiamare queste funzioni, devi utilizzare uno dei metodi riportati di seguito, a seconda del tipo di player
utilizzato.
>. player:Object - If you are using the autoPlayType of none or standard then the original youtube embed player
object is available. In questo caso, puoi fare riferimento come illustrato di seguito alle funzioni dell'API AS3 di
YouTube.
ytp.proxy.player.getVolume();
>. autoPlayer:Object - If you are using the autoPlayType of preview then preview youtube embed player object is
available. In questo caso, puoi fare riferimento come illustrato di seguito alle funzioni dell'API AS3 di YouTube.
ytp.proxy.autoPlayer.stopVideo();
.Risorse.
>. Componente Video Player di YouTube
>. File FLA di esempio che utilizzano il metodo drag-and-drop del componente
>. File FLA di esempio che utilizzano il metodo dell'API
>. Documentazione sull'API di YouTube AS3
>. Centro assistenza DoubleClick Rich Media
>. DoubleClick Rich Media Studio
>. Galleria di DoubleClick Rich Media
>. @rmgallery - Account Twitter della galleria di DoubleClick Rich Media
.Per.
.contattarci.
Se hai ancora delle domande in merito a questo formato o sviluppo, non esitare a contattare il nostro team di
supporto tecnico Rich Media all'indirizzo [email protected].
.Informazioni.
.su DoubleClick.
Per gli inserzionisti e i publisher che desiderano raggiungere il pubblico di destinazione, la suite di prodotti
DoubleClick™ di Google è una piattaforma pubblicitaria che massimizza le entrate e il ritorno sul capitale investito
grazie a un unico e innovativo processo di targeting degli annunci. L'esperienza e lo spirito innovativo di DoubleClick
promuovono una costante evoluzione di prodotti e soluzioni, garantendo che i migliori e più efficaci strumenti
pubblicitari siano sempre nelle mani dei nostri clienti.
.www.doubleclick.com.
.www.richmediagallery.com.
.DoubleClick UK : Belgrave House, 76 Buckingham Palace Road, London SW1W 9TQ : Telefono: +44 (0)800 912 1344.
.www.doubleclick.co.uk ©2011 Google Inc. Tutti i diritti riservati..

Componente Video Player di YouTube. .Guida allo

Transcript

Documenti analoghi

Dedicato ai REM che si sono sciolti... "Imitation of life"

Inserimento Video da Youtube

YouTube: Beethoven Sonata al Chiaro di Luna

W. A. Mozart: "Non più andrai, farfallone amoroso"

tutte le info - AICS Bologna

Programmi per convertire e vedere video

Circolare di accompagnamento nota MIUR 2725-1