Utiliser des points de repère en vidéo

Employer des points de repères

Nous aurions pu nous arrêter à l’utilisation de sous-titres, mais nous allons voir que l’usage des <tracks> peut nous permettre d’aller encore plus loin. Par exemple, en implémentant d’autres fonctionnalités interactives issues de ces données. Encore une fois, à ce jour l’implémentation correcte dans les navigateurs fait défaut. Il faut alors faire appel à des librairies comme popcorn.js, cuepoint.org, et d’autres. Mais nous allons voir (uniquement sous chrome pour ce test), qu’en natif, Javascript et HTML5 peuvent promettre un avenir bien sympathique. Ajoutons un code <video> contenant une piste <track> composée comme les précédentes, mais avec les styles en moins. Ensuite, préparons un petit bout de code HTML près à recevoir une liste ;

<ul id="listecuepoint">
</ul>

… suivi de deux portions de javascript :
L’une au lancement de la page : Elle va avoir pour objectif de globaliser certaines variables comme l’élément <video>, l’élément de liste <ul> et l’extraction du tableau textTracks qui contient l’ensemble des éléments <track> de la balise (ici nous n’en avons qu’un, on en profite pour l’extraire directement [0]). Une fois le texte de la piste <track> chargé, (ne confondons pas le chargement de la balise HTML, et le chargement src de cette balise), nous pouvons parser les divers cuepoints depuis le tableau cues, et remplir en conséquence avec des éléments <li> la liste listecuepointmis en mémoire précédemment.

var videoElement = document.getElementById("videocuepoint");
var listecuepoint = document.getElementById("listecuepoint");
var tracks = videoElement.textTracks[0]
function loaded()  {
	for (var i=0,nb=tracks.cues.length;i<nb;i++){
		var cueText = tracks.cues[i].text
		var texte = document.createTextNode(cueText)
		var li = document.createElement('li')
		li.setAttribute('id',tracks.cues[i].id)
		li.appendChild(texte)
		listecuepoint.appendChild(li)
	}
}

Et une autre portion de script qui sera, elle, exécutée sous forme événementielle. C’est-à-dire, qu’une fois que la vidéo sera en lecture, pour chaque changement ou réception de cue point, un événement oncuechange sera intercepté. La variable memoire contiendra alors l’élément en cours de lecture. À chaque changement de cuepoints, l’ancien élément réinitialise son className à une chaîne vide, alors que le nouvel élément est mémorisé dans la variable memoire et qu’il est mis en surbrillance au travers de la classe activeCuePointqui lui est affectée.

var memoire = null
tracks.oncuechange = function(){
	var encours = document.getElementById(memoire);
	if (encours != null) {
		encours.className= ""
	}
	if (this.activeCues[0] !== undefined) {
		var id = this.activeCues[0].id
		memoire = id
		encours = document.getElementById(memoire);
		encours.className= "activeCuePoint" 
	}
}

Il ne reste plus qu’à tester l’animation :