Le API di YouTube per gli iframe ci consentono di utilizzare questi elementi come se fossero dei video veri e propri con tutte le azioni ad essi associati. Il problema di queste API è che hanno dei requisiti alquanto stringenti per il loro utilizzo.
Struttura HTML
La struttura HTML da usare prevede che il codice JavaScript venga inserito nella pagina dopo l'elemento di riferimento:
<body>
<div id="video"></div>
<script><!-- Codice JavaScript --></script>
</body>
Caricamento
Ci sono due modi per caricare il file principale di queste API:
- Inserendo un elemento
scriptinhead - Caricando il codice in modo asincrono.
Il primo metodo è come segue:
<head>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
</head>
Il secondo metodo va implementato subito prima delle chiamate alle API:
var script = document.createElement( "script" );
script.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName( "script" )[0];
firstScriptTag.parentNode.insertBefore( script, firstScriptTag );
Creare un oggetto player
Le API in questione utilizzano funzioni globali dal nome predefinito. In altre parole abbiamo due vincoli:
- Le funzioni devono essere globali
- Le funzioni devono avere il nome stabilito dalle API.
Un oggetto player viene creato in questo modo:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( "video", {
height: "390",
width: "640",
videoId: "M7lc1UVf-VE",
playerVars: {
controls: 0,
fs: 0,
modestbranding: 1,
rel: 0,
showinfo: 0
},
events: {
onStateChange: onPlayerStateChange
}
});
}
A questo punto dovreste vedere l'iframe del video che ha sostituito l'elemento con ID video. L'oggetto YT.Player ha questi parametri:
- Il riferimento DOM all'elemento scelto.
- Altezza e larghezza del video.
- ID del video (fondamentale).
- Le variabili di configurazione del video. I loro nomi sono identici ai parametri degli URL di YouTube ed il loro scopo è analogo (trovate i riferimenti completi nella documentazione).
- Gli eventi associati al video.
A questo punto abbiamo un oggetto player. Cosa possiamo fare adesso?
Usare controlli custom
Possiamo implementare i classici bottoni "Play" e "Pause":
var play = document.getElementById( "play" ),
pause = document.getElementById( "pause" );
play.addEventListener( "click", function() {
player.playVideo();
}, false);
pause.addEventListener( "click", function() {
player.pauseVideo();
}, false);
Reperire la durata del video
Quando un video viene riprodotto, l'oggetto player dispone di molte informazioni sul video. Una di queste è la durata, espressa in secondi:
var duration = player.getDuration(); // Es: 80
Un esempio di uso pratico di questo valore è l'implementazione di una barra di avanzamento del video:
var play = document.getElementById( "play" ),
pause = document.getElementById( "pause" ),
timer = null,
progress = document.getElementById( "progress" ),
progressBar = document.getElementById( "progress-bar" );
play.addEventListener( "click", function() {
player.playVideo();
var duration = player.getDuration(); // Durata in secondi
var progressWidth = progress.offsetWidth; // Larghezza del contenitore della barra
var widthPerSecond = Math.round( progressWidth / duration ); // Il fattore di incremento al secondo
var width = 0;
timer = setInterval(function() {
width += widthPerSecond;
progressBar.style.width = width + "px";
}, 1000); // Ogni secondo
}, false);
pause.addEventListener( "click", function() {
player.pauseVideo();
clearInterval( timer ); // Ferma l'avanzamento
}, false);
A questo punto c'è un problema: come fermiamo l'avanzamento quando il video finisce? Usando gli eventi.
Usare gli eventi
L'evento onStateChange restituisce una serie di valori che ci indicano in quale status si trova il video in un determinato momento. A noi interessa lo stato finale del video.
Quindi:
function onPlayerStateChange( event ) {
if( event.data === YT.PlayerState.ENDED ) {
// Il video è finito
clearInterval( timer ); // Ferma l'avanzamento
progressBar.style.width = "0px"; // Azzera l'avanzamento
}
}