Livraison de bande-annonces avec l’API iFrame de Youtube

Si vous, ou votre client, possédez une chaîne Youtube sur laquelle vous pouvez désactiver la monétisation et que les droits de diffusion sont en règle pour chaque publication, alors l’Api peut s’avérer une alternative efficace au serveurs de streaming populaires et coûteux.

Grâce à des connaissances en Javascript et en CSS, développer votre propre publicité HTML5 avec lecteur vidéo intégré devient un jeu d’enfant.

Avant tout, il faut créer un viewport CSS dans lequel seront placés le lecteur et les différents calques et/ou images servant les visuels et contrôles associés à la publicité.

Supposons que la pub à un format standard îlot (big box). La première étape sera donc d’utiliser une balise «div» pour obtenir un conteneur de 300×250 positionné relativement. Bien entendu, afin de ne pas recevoir l’avis que notre pub n’a pas le bon format car des éléments sortent du cadre imposé, il est impératif d’utiliser la propriété « overflow :hidden ».

À l’intérieur de ce conteneur, nous placerons une seconde balise en positionnement absolu dont l’identifiant sera simplement «player».
*Notez que pour un plus grand format, il est recommandé de placer player dans une autre balise en overflow :hidden qui servirait de second viewport; cette technique permet de déplacer, agrandir ou zoomer sur la vidéo sans avoir à modifier les dimensions et l’emplacement prévu pour le lecteur à l’intérieur de notre visuel (ou habillage).

Ensuite, il faut placer les différents éléments de contenu qui serviront la lecture vidéo : les boutons play, pause et volume par exemple.

En résumé, notre code html et css pourrait ressembler à ceci :

CSS


<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8'>

<style>
#pub{
position:relative; 
margin:0 auto; 
padding:0; 
text-align:center; 
overflow:hidden; 
background:#000000; no-repeat #deecf5;
width:298px;
height:248px; 
border:1px solid #000000;
}

#player{
position:absolute; 
left:-20px; 
top:-85px; 
z-index:2; 
margin:0; 
padding:0; 
z-index:1;
}

img{border:0;}

.displayTrue{display:block; cursor:pointer;}
.displayFalse{display:none;}

#load{
position:absolute;
width:16px;
height:16px;
left:50%;
top:50%;
margin: -20px 0 0 50px;
z-index:1;
}

#pause{
  position:absolute;
  width:23px;
  height:24px;
  top:1px;
  right:2px;
  background:url("images/stop2.png") 0 0 no-repeat;
  z-index:3;
  opacity:1;
  margin:0;
}

#pause:hover,#pause:active,#pause:focus{
  background-position:-21px 0px;
}

#play{
 position:absolute;
  width:23px;
  height:24px;
  top:1px;
  right:2px;
  background:url("images/play2.png") 0 0 no-repeat;
  z-index:3;
  /*opacity:0;*/
   margin:0;
}
#play:hover,#play:active,#play:focus{
  background-position:-21px 0px;
}
#bigplay{
width:48px; 
height:31px; 
position:absolute;
left:127px;
top:104px;
z-index:999;
background:url("images/bt_play.png") 0 0 no-repeat;
cursor:pointer;
opacity:0;
display:none;
margin:0;
}
#bigplay:hover,#bigplay:active,#bigplay:focus{
  background-position:-49px 0px;
}

#Off{
  position:absolute;
  width:23px;
  height:24px;
  top:4px;
  left:394px;
  margin:0;
  background:url("images/son-off.png") 0 0 no-repeat;
  z-index:4;
  display:none;
}
#Off:hover,#Off:active,#Off:focus{
  background-position:-21px 0px;
}
#On{
  position:absolute;
  width:23px;
  height:24px;
  top:4px;
  left:394px;
  background:url("images/son-on.png") 0 0 no-repeat;
  z-index:4;
  display:none;
}
#On:hover,#On:active,#On:focus{
  background-position:-22px 0px;
}
#volumeOn{
position:absolute;
width:81px;
height:63px;
left:507px;
top:88px;
z-index:5;
margin:0;
background:url("images/bigsong.png") 0 0 no-repeat;
cursor:pointer;
}
</style>
</head>
<body>
   <div id="pub">
	 <img src="images/loader.gif" id="load" />
	 <div id="volumeOn" onclick="sonOn()"> </div>
         <div id="On" class="displayTrue"  onclick="sonOff()"> </div>
	 <div id="Off" class="displayTrue"  onclick="sonOn()"> </div>
	 <div id="pause" class="displayTrue"  onclick="pauseVideo()"> </div>
	 <div id="play" class="displayFalse" onclick="playVideo()"> </div>
	 <div id="bigplay" onclick="reloadVideo()"> </div>
	 <div id="player"></div>	
  </div>
 </body>
</html>

Dans notre exemple, la vidéo est plus haute et plus large que son conteneur pour donner une impression de « zoom ». C’est aussi parce que nous ne voulons pas voir s’afficher par dessus la bande-annonce, mais bien dans des bandes noires à l’extérieur du viewport, le logo Youtube qui pourrait être remplacer par celui du distributeur par exemple.

De plus, le son ne pouvant être activé qu’au clic de l’utilisateur, nous avons placer un gros bouton de volume en transparence (volumeOn) au centre du lecteur pour inviter à cette action.

Le bouton « bigplay », quant à lui, sera appelé au final via la fonction onPlayerStateChange que nous verrons sous peu (lorsque event.data == 0 ). Ce bouton est utile dans le cas où nous avons un élément poster qui serait appelé d’une autre manière qu’en utilisant une miniature via le gestionnaire de vidéo de la chaîne ou un calque clickTag.

En effet, avec un placement clickTag, le bouton Youtube par défaut n’est plus accessible alors bigplay va le remplacer.

Maintenant, suivant les exemples et recommandations dans l’aide Youtube appropriée, voici à quoi pourrait ressembler le javascript :

<script
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var Pause = document.getElementById('pause'); var Play = document.getElementById('play'); var On = document.getElementById('On'); var Off = document.getElementById('Off'); var BigPlay = document.getElementById('bigplay'); var Volume = document.getElementById('volumeOn'); var Loader = document.getElementById('load'); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '320', width: '450', videoId: 'we3454643we', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange }, playerVars :{ 'autoplay': 1, 'rel' : 0, 'hl' : 'fr_FR', 'controls' : 0, 'autohide' : 0, 'fs' : 1, 'showsearch' : 0, 'iv_load_policy' : 3, 'showinfo': 0, 'modestbranding' : 1, 'wmode':'transparent' } }); } function onPlayerReady(event) { event.target.mute(); Loader.style.display = "none"; } function onPlayerStateChange(event) { if (event.data == 0) { BigPlay.style.display = "block"; Volume.style.display = "none"; Pause.className.replace(/\bdisplayTrue\b/, ""); Pause.className = "displayFalse"; }; } function playVideo() { player.playVideo(); Play.className = "displayFalse"; Pause.className = "displayTrue"; } function pauseVideo() { player.pauseVideo(); Pause.className.replace(/\bdisplayTrue\b/, ""); Play.className.replace(/\bdisplayFalse\b/, ""); Pause.className = "displayFalse"; } function reloadVideo() { Pause.className.replace(/\bdisplayFalse\b/, ""); Pause.className = "displayTrue"; player.seekTo(1, true); player.unMute(); BigPlay.style.display = "none"; Volume.style.display = "none"; } function sonOn() { player.unMute(); Off.style.display = "none"; On.style.display = "block"; Volume.style.display = "none"; } function sonOff() { player.mute(); Off.style.display = "block"; On.style.display = "none"; }
</script>

Évidemment, comme ce n’est qu’à titre d’exemple, il est à votre discrétion d’utiliser JQuery et/ou d’ajouter des effets plus fluides en les chaînant et en ajoutant d’autres classes CSS, des setTimeout, etc.

Ce code est également à optimiser pour contrôler l’affichage de publicités qui requièrent d’attendre, avant de lancer la vidéo, le chargement de certains éléments de contenu. Vous pouvez aussi vérifier que le DOM est chargé via window.onload si vous voulez.

De plus, il serait pertinent pour certaines fonctions de préciser un comportement à adopter dans le cas d’une utilisation mobile ou tablette. Ici notre vidéo démarre automatiquement grâce à autoplay mais ce procédé ne fonctionnera pas sur les appareils mobiles. Une intervention de l’utilisateur étant obligatoire, il faudra donc au minimum mettre à display:none; => bigplay, volumeOn et désactiver les actions qui leur sont associées sur ces appareils.

On pourrait, par exemple, employer cette façon de faire :

<script>
var oS2 = /(Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini )/i.test(navigator.userAgent); if(oS2) { function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '410', width: '340', videoId: 'we3454643we', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } } else { 'Notre fonction telle qu'écrite au précédent script ' } [...] function onPlayerReady(event) { if (oS2) { BigPlay.style.display = "none"; Volume.style.display = "none"; } else{ [...] } }
</script>

Voici un créatif réalisé avec ce procédé : Beeba Boys – Billboard


Partagez cette page :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *