Le YouTube Iframe API ci consentono di utilizzare gli elementi iframe 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:
const script = document.createElement( "script" );
script.src = "https://www.youtube.com/iframe_api";
const 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:
function onYouTubeIframeAPIReady() {
const 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":
const play = document.getElementById( "play" );
const pause = document.getElementById( "pause" );
play.addEventListener( "click", () => {
player.playVideo();
}, false);
pause.addEventListener( "click", () => {
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:
const duration = player.getDuration(); // Es: 80
Un esempio di uso pratico di questo valore è l'implementazione di una barra di avanzamento del video:
let play = document.getElementById( "play" ),
pause = document.getElementById( "pause" ),
timer = null,
progress = document.getElementById( "progress" ),
progressBar = document.getElementById( "progress-bar" );
play.addEventListener( "click", () => {
player.playVideo();
const duration = player.getDuration(); // Durata in secondi
const progressWidth = progress.offsetWidth; // Larghezza del contenitore della barra
const widthPerSecond = Math.round( progressWidth / duration ); // Il fattore di incremento al secondo
let width = 0;
timer = setInterval(() => {
width += widthPerSecond;
progressBar.style.width = width + "px";
}, 1000); // Ogni secondo
}, false);
pause.addEventListener( "click", () => {
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
}
}