Sincronizzare un evento con un video HTML5

Il tag <video> di HTML5 permette di inserire in modo semplice un video in una pagina HTML. I browser più recenti, infatti, posseggono un player di default che utilizzano per visualizzare il file multimediale.
Il tag <video> prevede un tag <source> in cui viene specificato il percorso della risorsa multimediale. I formati supportati attualmente sono .mp4, .ogg e .webm ma, poiché ciascun browser riesce ad utilizzare solo alcuni tipi di file, è necessario inserire almeno due formati diversi (.ogg e .mp4- fonte W3Schools):

 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Gli attributi width e height specificano rispettivamente la larghezza e l'altezza del video.
Possono essere anche utilizzati diversi attributi opzionali, come

• controls: se presente, il player visualizza la barra dei controlli, con cui è possibile avviare/mettere in pausa il video, regolarne il volume e abilitare la visione in fullscreen;
• poster: specifica il percorso dell'immagine che deve essere visualizzata finché non si avvia il video;
• autoplay: se presente, il video parte automaticamente al caricamento della pagina.

In questo articolo vedremo come far apparire un box di testo in corrispondenza di un preciso momento della traccia video. Il video è stato creato utilizzando le foto scattate da Mauro Zorzenon, che ringraziamo.

DEMO

Ecco la funzione inserita in head, che utilizza la libreria jQuery:

$(document).ready(function(){
 $('#miovideo').on("timeupdate", function () {
    var videoTime = this.currentTime;
      if(videoTime>= 16 && videoTime<= 24){
        $('div#box1').show();
       }
      else if(videoTime>= 38 && videoTime <= 50){
        $('div#box2').show();
       }
      else
        $('div#tooltip div:visible').hide();
   });
});

Al caricamento del DOM, il metodo .on() di jQuery consente di associare un evento al selettore specificato: in questo caso l'evento è timeupdate, evento di HTML5 media che si verifica all'avanzamento della traccia video, e il selettore è il video con id="miovideo".

Il valore della posizione corrente della riproduzione, espressa in secondi, viene via via memorizzato nella proprietà currentTime. Con l'istruzione condizionale if / else if si effettua il confronto tra il valore di questa proprietà con il numero che rappresenta il secondo da cui si vuole far partire/terminare la visualizzazione del testo: ad esempio la condizione posta nella prima istruzione if verifica se il tempo di riproduzione è compreso tra 16 e 24 secondi, ed in questo caso viene mostrato grazie al metodo .show() il primo box di testo.
Se tutte le condizioni precedenti risultano false, viene eseguita l'istruzione specificata in else, che nasconde l'eventuale box visibile.

Per approfondire l'argomento:

• HTML5 Video Events and API - w3.org

Link al video pubblicato su YouTube