JavaScript: introduzione alle Iframe API di YouTube

Short link

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:

  1. Inserendo un elemento script in head
  2. 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:

  1. Le funzioni devono essere globali
  2. 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
		
			
	}
}

Documentazione