Composant YouTube Player. Guide de creation.
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
.Guide de mise en œuvre pour les agences publicitaires.
Août 2011.
.Composant YouTube Player.
Guide de creation.
Introduction.
Vous mettez en ligne vos vidéos sur Internet via YouTube ? Vous utilisez ce site pour augmenter votre audience et
créer le buzz autour de la bande-annonce du prochain grand blockbuster, inciter les internautes à regarder
plusieurs fois votre dernier spot TV ou simplement pour héberger des vidéos et des contenus publicitaires
associés ? Dans ce cas, pourquoi ne pas intégrer également ces vidéos dans vos créations rich media, au moyen de
notre composant YouTube Player ?
Entre les versions noir et blanc de YouTube, choisissez l'habillage qui s'harmonisera le mieux avec les autres
éléments de la création..Composant vidéo YouTube. Le composant YouTube Player vous permet d'intégrer une réplique du lecteur YouTube complet, avec l'ensemble des commandes qui accompagnent habituellement une vidéo YouTube standard (annotations, option de plein écran et paramètre de qualité de l'image). Vous avez également la possibilité de créer vos propres commandes graphiques. Grâce à l'API YouTube Player, sélectionnez les commandes disponibles avec la vidéo, disposez-les où bon vous semble et personnalisez leur apparence. Avec le composant YouTube Player, vous bénéficiez également de l'ensemble des statistiques de suivi DoubleClick Rich Media généralement disponibles avec les créations vidéo rich media classiques. En plus des statistiques Rich Media standards, il est possible de connaître le nombre de vues de·vidéos, de lectures, de pauses, de réglages du volume, et même le nombre de lectures ayant atteint 25, 50, 75 ou 100 % de la vidéo. Cerise sur le gâteau : tout visionnage déclenché par l'internaute au sein de la création sera pris en compte dans le nombre de vues de votre vidéo sur YouTube. De quoi booster le potentiel viral de votre campagne grâce à votre création rich media. IMPORTANT :. Les vues de vidéos YouTube sont UNIQUEMENT comptabilisées si l'internaute clique sur le bouton de lecture par défaut de YouTube (affiché au milieu de la création) ou sur le bouton de lecture figurant dans le menu de commandes par défaut, dans l'angle inférieur gauche du lecteur. Les lectures automatiques ne sont pas prises en compte. IMPORTANT :. Si vous utilisez des commandes vidéo personnalisées, le nombre de vues des vidéos YouTube n'augmentera JAMAIS suite au visionnage d'une vidéo intégrée dans la création, que la lecture ait été déclenchée ou non par l'internaute. .Compatible avec AS3 seulement. Bien qu'elle soit encore opérationnelle, l'API YouTube AS2 a été déclarée officiellement obsolète par YouTube. De ce fait, elle n'est plus acceptée ni par YouTube, ni par DoubleClick. Vous trouverez ci-dessous la documentation complète relative à l'utilisation de notre composant YouTube Player AS3, avec des informations sur l'API AS3. Le composant YouTube fonctionne avec l'ensemble des formats d'annonce rich media AS3. Ce guide vous explique comment l'utiliser. Pour savoir comment concevoir des créations rich media AS3 dans DoubleClick Studio, veuillez consulter notre centre d'aide .ici. REMARQUE : Si vous avez des questions, veuillez envoyer un e-mail à l'adresse .dclk-drmtechnical@google.com.
.Utilisation du composant.
1.. Téléchargez le composant YouTube .ici.
2.. Installez ensuite le composant en double-cliquant sur le fichier mxp. Cliquez sur "Accept" (Accepter) dans la
fenêtre Adobe Extension Manager qui s'affiche.
REMARQUE : Vous pouvez également ouvrir Flash, accéder au menu d'aide, sélectionner "Manage Extensions" (Gérer les extensions) dans la
liste déroulante, puis sélectionner et installer le fichier mxp que vous avez téléchargé.
3.. Ouvrez Flash et lancez un nouveau projet AS3.
4.. Ouvrez la fenêtre des composants. À partir du menu "DoubleClick Innovation AS3", faites glisser le composant
YouTube Player depuis la fenêtre des composants dans l'espace de création.
5.. Redimensionnez le composant et placez-le à l'endroit voulu au sein de votre création.
6.. Copiez l'extrait de code ActionScript suivant, puis collez-le dans la couche ActionScript. Ce code garantit le
fonctionnement de l'option d'affichage en plein écran ainsi que l'enregistrement de l'ensemble des statistiques de
suivi Rich Media.
import com.google.ads.studio.innovation.youtube.player.YTPlayerEvent;
import com.google.ads.studio.innovation.youtube.player.proxy.YTPlayer;
//Activer l'affichage en plein écran
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.VIDEO_25_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_50_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_75_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.VIDEO_100_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_0_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_25_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_50_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_75_PERCENT, eventHandler);
ytp.proxy.addEventListener(YTPlayerEvent.AUTOPLAY_VIDEO_100_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;
case YTPlayerEvent.VIDEO_25_PERCENT :
Enabler.counter("YTVideo Percent 25");
break;
case YTPlayerEvent.VIDEO_50_PERCENT :
Enabler.counter("YTVideo Percent 50");
break;case YTPlayerEvent.VIDEO_75_PERCENT :
Enabler.counter("YTVideo Percent 75");
break;
case YTPlayerEvent.VIDEO_100_PERCENT :
Enabler.counter("YTVideo Percent 100");
break;
case YTPlayerEvent.AUTOPLAY_VIDEO_0_PERCENT :
Enabler.counter("YTVideo Autoplay Percent 0");
break;
case YTPlayerEvent.AUTOPLAY_VIDEO_25_PERCENT :
Enabler.counter("YTVideo Autoplay Percent 25");
break;
case YTPlayerEvent.AUTOPLAY_VIDEO_50_PERCENT :
Enabler.counter("YTVideo Autoplay Percent 50");
break;
case YTPlayerEvent.AUTOPLAY_VIDEO_75_PERCENT :
Enabler.counter("YTVideo Autoplay Percent 75");
break;
case YTPlayerEvent.AUTOPLAY_VIDEO_100_PERCENT :
Enabler.counter("YTVideo Autoplay Percent 100");
break;
case YTPlayerEvent.VIDEO_PAUSE :
Enabler.counter("YTVideo Pause");
break;
case YTPlayerEvent.VIDEO_REPLAY :
Enabler.counter("YTVideo Replay");
break;
case YTPlayerEvent.VIDEO_MUTE :
Enabler.counter("YTVideo Mute");
break;
case YTPlayerEvent.VIDEO_UNMUTE :
Enabler.counter("YTVideo Unmute");
break;
case YTPlayerEvent.VIDEO_FULLSCREEN :
Enabler.counter("YTVideo Fullscreen Entered");
break;
case YTPlayerEvent.VIDEO_EXIT_FULLSCREEN :
break;
case YTPlayerEvent.VIDEO_QUALITY_CHANGE :
Enabler.counter("YTVideo Quality Change");
break;
REMARQUE : Un exemple de fichier intégrant ce composant est disponible .ici.
REMARQUE : Les instructions Case peuvent servir à déclencher des actions et des événements personnalisés. N'hésitez pas à modifier les
fonctions pour lancer des actions spécifiques au niveau de la création (à la fin de la vidéo, lorsque l'internaute interrompt la lecture ou active le
son, etc.).
7.. Sélectionnez le composant ajouté dans l'espace de création, puis attribuez-lui le nom d'instance ytp, dans le
champ "Instance name" (Nom d'instance) de la fenêtre "Properties" (Propriétés).
8.. Alors que la fenêtre "Properties" (Propriétés) est encore affichée, accédez à la section "Component Parameters"
(Paramètres du composant) et repérez la propriété videoId. Indiquez ensuite l'ID de la vidéo YouTube à intégrer
dans votre création.
REMARQUE : Vous pouvez identifier l'ID en accédant à la vidéo sur YouTube. Exemple : http://www.youtube.com/watch?v=HwylTXMSftE. L'URL
se termine par un code unique à 11 caractères (précédé de v=), qui correspond à l'ID de votre vidéo YouTube. Dans cet exemple, saisissez
HwylTXMSftE comme propriété du paramètre "videoIdComponent".
9.. Une fois le fichier FLA publié, votre vidéo YouTube devrait s'afficher dans votre création. Pour en savoir plus sur
les autres paramètres du composant, consultez la section "Paramètres du composant" ci-dessous..Paramètres du composant.
Vous avez la possibilité de modifier chacun des paramètres suivants à partir de la section "Component parameters"
(Paramètres du composant), dans la fenêtre "Properties" (Propriétés) du composant YouTube Player. Dans la
mesure où ces paramètres peuvent également être appelés via l'API, nous vous proposons à chaque fois un
exemple d'utilisation de l'API.
>. autoCrop (booléen) : rogne les barres noires susceptibles de s'afficher sur la vidéo lors de la lecture.
Exemple d'utilisation de l'API :
ytp.autoCrop = true;
REMARQUE : Ce paramètre N'EST PAS compatible avec la version 0. En cas d'activation de cette option dans la version 0, l'environnement de
développement intégré Flash plantera au moment de la compilation.
REMARQUE : Dans la version 1, la miniature est étirée lorsque la lecture automatique est désactivée.
>. autoHideControls (booléen) : affiche la barre de commandes vidéo au passage du curseur sur le lecteur. En
autres temps, la barre est masquée.
Exemple d'utilisation de l'API :
ytp.autoHideControls = true;
>. autoPlayType (chaîne) : active la lecture automatique de la vidéo, avec ou sans le son, ou lance la lecture suite à
un clic de l'internaute.
none = lecture automatique désactivée. Lorsqu'un internaute clique sur le bouton de lecture, une vue de
vidéo YouTube est comptabilisée.
preview = lecture automatique activée sans le son. Lorsqu'un internaute clique sur le bouton en
superposition, une vue de vidéo YouTube est comptabilisée.
standard = lecture automatique activée avec le son. Aucun bouton en superposition ne s'affiche et aucune
vue de vidéo YouTube n'est comptabilisée.
Exemple d'utilisation de l'API :
//valeurs valides : "none", "preview", "standard"
ytp.autoPlayType = "preview";
REMARQUE : L'option "standard" de lecture automatique avec le son N'EST PAS compatible avec la version 1.
>. hdOnFullscreen (booléen) : lorsque l'internaute passe en mode plein écran alors que cette option est activée, la
qualité de lecture de la vidéo est définie sur 720 pixels (si disponible).
Exemple d'utilisation de l'API :
ytp.hdOnFullscreen = true;
>. playerType (chaîne) : le lecteur est actuellement disponible en deux versions, Embedded et Chromeless. La
version Embedded correspond au lecteur vidéo disponible sur le site YouTube, avec ses commandes associées. Le
lecteur Chromeless, quant à lui, n'inclut aucune commande vidéo, ce qui vous laisse le loisir de créer vos propres
commandes.
Exemple d'utilisation de l'API :
//valeurs valides : "embedded", "chromeless"
ytp.playerType = "embedded";
REMARQUE : Le lecteur Chromeless N'EST PAS compatible avec la version 1.>. previewDuration (nombre représentant des secondes) : durée de l'aperçu de la vidéo, lorsque le paramètre
autoPlayType est défini sur "preview".
Exemple d'utilisation de l'API :
ytp.previewDuration = 18;
REMARQUE : SEULE la valeur "30" est admise pour le moment dans la version 1 du lecteur.
>. showInfo (booléen) : affiche le titre de la vidéo et des informations sur sa mise en ligne au passage du curseur
sur la vidéo.
Exemple d'utilisation de l'API :
ytp.showInfo = false;
REMARQUE : Ce paramètre N'EST PAS compatible avec la version 1.
>. suggestedQuality (chaîne) : qualité de lecture de la vidéo.
Exemple d'utilisation de l'API :
//valeurs valides : "default", "small", "medium", "large", "hd720"
ytp.suggestedQuality = "hd720";
>. theme (chaîne) : thème qui habillera le lecteur.
Exemple d'utilisation de l'API :
//valeurs valides : "light", "dark"
ytp.theme = "dark";
>. version (entier positif) : le composant YouTube Player est disponible en deux versions. La version 0 charge une
ancienne solution éprouvée, tandis que la version 1 par défaut charge la nouvelle solution.
Exemple d'utilisation de l'API :
//valeurs valides : "0", "1"
ytp.version = 0;
REMARQUE : La version 1 présentant quelques bugs, nous vous recommandons d'utiliser la version 0. Sachez que nous faisons de notre mieux
pour que ces bugs soient corrigés au plus vite. Pour autant, nous ne pouvons vous garantir leur résolution avant la diffusion de votre création.
>. videoId (chaîne) : ID de la vidéo YouTube.
Exemple d'utilisation de l'API :
ytp.videoId = "HwylTXMSftE";.Composant YouTube Player :.
.Méthodes et propriétés d'API.
Vous pouvez appeler et intégrer un certain nombre de méthodes d'API dans votre code ActionScript, en plus des
paramètres du composant. Ces méthodes sont présentées ci-dessous.
>. clickToContinueText (chaîne) : texte affiché à la fin de l'aperçu de la vidéo. Par défaut, ce texte est défini sur
"Cliquer pour continuer".
Exemple d'utilisation de l'API :
ytp.clickToContinueText = "Cliquer pour regarder la vidéo dans son intégralité";
REMARQUE : Ce paramètre N'EST PAS compatible avec la version 1.
>. clickForSoundText (chaîne) : texte affiché lors de la lecture de l'aperçu. Par défaut, ce texte est défini sur
"Cliquer pour activer le son".
Exemple d'utilisation de l'API :
ytp.clickForSoundText = "Cliquer pour regarder la vidéo avec le son";
REMARQUE : Ce paramètre N'EST PAS compatible avec la version 1.
>. color (chaîne) : couleur de la barre de progression.
Exemple d'utilisation de l'API :
//valeurs valides : "red", "white"
ytp.color = "white";
>. customThumbUrl (chaîne) : image à afficher sous forme de miniature pour la vidéo, au lieu de l'image par
défaut sélectionnée lors de la mise en ligne de la vidéo sur YouTube.
Exemple d'utilisation de l'API :
//valeurs valides : nom de fichier ou URL complète
ytp.customThumbUrl = Enabler.getFilename("monImage.jpg");
REMARQUE : Ce paramètre N'EST PAS compatible avec la version 0.
>. destroy() (type nul) : cette fonction entraîne la destruction de l'instance du lecteur YouTube.
Exemple d'utilisation de l'API :
ytp.destroy();
REMARQUE : Un lecteur YouTube doit toujours être déchargé en appelant "ytp.destroy()". Cette fonction ferme l'objet "NetStream" et bloque
tout téléchargement de vidéos une fois le lecteur déchargé. Si votre code contient d'autres références au fichier SWF du lecteur, pensez
également à les détruire lorsque vous déchargerez ce dernier..Composant YouTube Player :.
.Autres méthodes d'API.
En accédant directement au composant de proxy, vous bénéficiez également d'un certain nombre de fonctions vous
permettant de contrôler le lecteur YouTube via ActionScript. Ces fonctions sont présentées ci-dessous.
>. pause() (type nul) : interrompt la vidéo lue.
Exemple d'utilisation de l'API :
ytp.proxy.pause();
>. play() (type nul) : lance la lecture de la vidéo mise en file d'attente ou chargée.
Exemple d'utilisation de l'API :
ytp.proxy.play();
REMARQUE : Nous vous rappelons que YouTube ne comptabilise que les lectures déclenchées au moyen d'un bouton de lecture natif dans le
lecteur Embedded ou Chromeless.
>. replay() (type nul) : relance la lecture de la vidéo.
Exemple d'utilisation de l'API :
ytp.proxy.replay();
>. mute() (type nul) : coupe le son de la vidéo lue.
Exemple d'utilisation de l'API :
ytp.proxy.mute();
>. unMute() (type nul) : réactive le son de la vidéo lue.
Exemple d'utilisation de l'API :
ytp.proxy.unMute();
>. cueVideoById(chaîne représentant l'ID vidéo) (type nul) : charge la miniature de la vidéo indiquée et prépare le
lecteur à lire la vidéo. Ce dernier ne charge la vidéo qu'une fois que la fonction "play()" a été appelée.
Exemple d'utilisation de l'API :
ytp.proxy.cueVideoById("HwylTXMSftE");
REMARQUE : Dans la version 1, cette méthode entraîne des problèmes de déclenchement au niveau des événements de suivi.
>. loadVideoById(chaîne représentant l'ID vidéo) (type nul) : charge la vidéo indiquée et lance sa lecture.
Exemple d'utilisation de l'API :
ytp.proxy.loadVideoById("HwylTXMSftE");
REMARQUE : Dans la version 1, cette méthode entraîne des problèmes de déclenchement au niveau des événements de suivi.
>. loadVideo() (type nul) : charge une vidéo en fonction des propriétés déjà définies. Si vous souhaitez changer de
vidéo une fois la lecture de la vidéo initiale lancée, il suffit de modifier les propriétés et d'appeler cette méthode.
Cela vous évite de créer une autre instance du lecteur.
Exemple d'utilisation de l'API :
ytp.proxy.loadVideo();
REMARQUE : SEULE la version 1 accepte cette fonction.Le composant YouTube Player propose également trois méthodes statiques pouvant être appelées à tout moment,
sans même avoir besoin de créer ou d'initialiser l'objet YouTube Player. Les fonctions correspondantes doivent
alors être appelées via le composant YTPlayer, et non via le proxy. Vous trouverez ci-dessous une présentation de
ces méthodes, ainsi que des exemples expliquant comment les utiliser et les appeler :
>. pauseAllVideos() (type nul) : interrompt toutes les vidéos lues.
>. muteAllVideos() (type nul) : coupe le son de toutes les vidéos lues.
>. destroyAllVideos() (type nul) : détruit toutes les vidéos lues.
Exemple d'utilisation de l'API :
import com.google.ads.studio.innovation.youtube.player.proxy.YTPlayer;
function exitClicked(e:MouseEvent) {
YTPlayer.pauseAllVideos();
}
my_btn.addEventListener(MouseEvent.CLICK, exitClicked);
REMARQUE :. Ces fonctions sont limitées à un usage restreint, dans la mesure où le composant interrompt automatiquement l'ensemble des
vidéos après un clic de sortie.
.Composant YouTube Player :.
.Vous ne souhaitez pas utiliser le composant.
Que se passe-t-il si, au lieu d'utiliser le composant de type glisser-déposer, vous préférez créer tout de A à Z à l'aide
de fichiers ActionScript internes et externes ? Eh bien... c'est tout à fait faisable !
Exemple d'utilisation de l'API :
import com.google.ads.studio.innovation.youtube.player.proxy.YTPlayer;
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;
REMARQUE : Vous pouvez utiliser dans vos fichiers l'ensemble des fonctions, méthodes et cas d'emploi de l'API décrits précédemment.
Un exemple de fichier FLA illustrant cette possibilité est disponible ici..Utilisation de l'API YouTube AS3.
Étant donné qu'il a été conçu à l'aide de l'API YouTube, le composant YouTube Player de DoubleClick est également
compatible avec l'ensemble des fonctions de l'API YouTube Player standard.
L'API YT AS3 complète est disponible .ici. Notez, cependant, que le mode de communication avec le lecteur YouTube
varie légèrement.
Ces fonctions doivent être appelées via l'une des méthodes suivantes, en fonction du type de lecteur utilisé :
>. player (objet) : lorsque le paramètre autoPlayType est défini sur none ou standard, l'objet de lecteur intégré
YouTube initial est disponible. Les fonctions de l'API YouTube AS3 pourraient alors être référencées comme suit :
Exemple d'utilisation de l'API :
ytp.proxy.player.getVolume();
>. autoPlayer (objet) : lorsque le paramètre autoPlayType est défini sur preview, l'objet de lecteur intégré
YouTube d'aperçu est disponible. Les fonctions de l'API YouTube AS3 pourraient alors être référencées comme suit :
Exemple d'utilisation de l'API :
ytp.proxy.autoPlayer.stopVideo();
REMARQUE : Cette méthode N'EST PAS compatible avec la version 1.
.Ressources.
>. Composant YouTube Player
>. Exemples de fichiers FLA basés sur la méthode de glisser-déposer
>. Exemple de fichier FLA basé sur la méthode de l'API
>. Documentation relative à l'API YouTube AS3
>. Centre d'aide DoubleClick Rich Media
>. DoubleClick Rich Media Studio
>. Galerie DoubleClick Rich Media
>. @rmgallery - Galerie DoubleClick Rich Media (compte Twitter).Nous.
.contacter.
Si certaines de vos questions à propos de ce format ou de la création restent en suspens après la lecture de ce
document, veuillez contacter notre équipe d'assistance technique Rich Media ou envoyer un e-mail à l'adresse
dclk-drmtechnical@google.com
.À propos de.
.DoubleClick.
Destinée aux annonceurs et aux éditeurs souhaitant toucher une audience cible, la suite de produits DoubleClick™
de Google est une plate-forme publicitaire permettant d'optimiser la croissance des revenus et le retour sur
investissement. Pour ce faire, elle s'appuie sur un processus de ciblage unique et innovant. L'esprit novateur des
équipes DoubleClick garantit l'évolution constante des produits et des solutions. Ainsi, les clients sont certains de
toujours disposer des outils publicitaires les plus performants.
.www.doubleclick.com.
.www.richmediagallery.com.
.DoubleClick (Royaume-Uni) : Belgrave House, 76 Buckingham Palace Road, London SW1W 9TQ, Royaume-Uni – Téléphone : +44 (0)800 912 1344.
.www.doubleclick.co.uk © Google Inc. 2011. Tous droits réservés.Vous pouvez aussi lire
