L’élément Track

Aujourd’hui, je vais vous parler d’une nouvelle caractéristique de HTML5 : l’élément <track></track>. L’HTML5 amène avec lui la gestion de contenu multimédia tels que les musiques et les vidéos grâces aux balises <vidéos> et <audio>, tandis qu’il fallait passer encore il y a quelques temps par un player flash. L’élement <track></track> se situe dans les balises <vidéos></videos> et <audio></audio>. Comme dit sur le site html5rocks :

The track element provides a simple, standardized way to add subtitles, captions, screen reader descriptions and chapters to video and audio.

L’élement track permet donc de rajouter des sous-titres, des légendes, des descriptions et des chapitres à l’audio et la vidéo. Cet élément n’est supporté que pour l’instant par IE10 et les versions supérieurs à Chrome 18. Par défaut, le sous-titre apparaît comme sur la capture d’écran ci-dessous.

Sous-titres

Sous-titres

Et voici son code source :

HTML

<video src="foo.ogv" width="300" height="150">
    <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default="" />
    <track kind="subtitles" label="Deutsch Untertitel" src="subtitles_de.vtt" srclang="de" />
</video>

Comme on peut le voir avec l’attribut src, les sous-titre sont en format VTT, non pas pour Vélo Tout Terrain, mais plutôt pour « Web Video Text Tracks« .

C’est donc un fichier texte avec pour chaque apparition à l’écran, un identifiant, le temps du sous-titre, et le sous-titre lui-même.

Voici un extrait du fichier « subtitles_en.vtt » :

WEBVTT

railroad 00:00:10.000 -->
00:00:12.500
Left uninspired by the crust of railroad earth
 
manuscript 00:00:13.200 -->
00:00:16.900
that touched the lead to the pages of your manuscript.

Ce fichier ne peut être composé n’importe comment :

  • Les temps doivent être en heures:minutes:secondes:millisecondes (avec ce nombre de zero : 00:00:00:000)
  • Les nouveaux sous-titres doivent être séparés par une ligne vide. Au moins, c’est l’occasion de tester le Live WebVTT Validator.

Cependant, du HTML ou du JSON peuvent être utilisés comme montré dans le code ci-desssous :

WEBVTT

multiCell 00:01:15.200 -->00:02:18.800
Multi-celled organisms have different types of cells that perform specialised functions.
Most life that can be seen with the naked eye is multi-cellular.
These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.

JSON

multiCell 00:01:15.200 -->00:02:18.800
{
    "title": "Multi-celled organisms",
    "description": "Multi-celled organisms have different types of cells that perform specialised functions. Most life that can be seen with the naked eye is multi-cellular. These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.",
    "src": "multiCell.jpg",
    "href": "http://en.wikipedia.org/wiki/Multicellular"
}
insects 00:02:18.800 -->00:03:01.600
{
"stateType": "chapter",
    "title": "Insects",
    "description": "Insects are the most diverse group of animals on the planet with estimates for the total number of current species range from two million to 50 million. The first insects appeared around 400 million years ago, identifiable by a hard exoskeleton, three-part body, six legs, compound eyes and antennae.",
    "src": "insects.jpg",
    "href": "http://en.wikipedia.org/wiki/Insects"
}

Toujours d’après Html5Rocks, le fait d’utiliser les données structurées rend l’élément track très puissant, puisque l’on pourra ensuite en extraire les informations, et modifier pourquoi pas le DOM en fonction du média qui passe.

Cela permettra aussi d’améliorer la navigation dans les médias. Par exemple, imaginez une recherche qui vous mène aux endroits de la vidéo ou est citée votre recherche.

Les infos sur l’élement pourront aussi être accédé grâce à du javascript :

JS

var videoElement = document.querySelector("video"); // on récupère les video
var textTracks = videoElement.textTracks; // on recupere chaque track de la video
var textTrack = textTracks[0]; // correspond à la première piste de la video
var kind = textTrack.kind // on recupère les sous-titres de la piste
var mode = textTrack.mode // 0 (TextTrack.OFF in spec, TextTrack.DISABLED in Chrome), 1 (TextTrack.HIDDEN) or 2 (TextTrack.SHOWING) //Si les sous-titres sont montré ou non (avec differentes notations selon les navigateurs)

Avec l’accès du javascript, on pourra aussi declencher des evenements lors de l’arrivée à certains passages de la vidéo :
(cue = la ligne de sous-titre)

JS

cue.onenter = function(){
    // fais quelque chose quand on arrive à ce sous-titre
};
cue.onexit = function(){
    // fais quelque chose quand ce sous-titre part
};

La méthode getCueAsHTML() converti une ligne de sous-titre en un élement HTML, puis pourquoi pas repris ensuite grâce à la css :

CSS

::cue { color: #444; font: 1em sans-serif; }
::cue .warning { color: red; font: bold; }

En conclusion, le fait de pouvoir stocker des données directement dans des fichiers liés aux médias, et non plus dans la bande de la vidéo, permet un gain énorme d’accessibilité, de portabilité, et de puissance de recherche.

Il faudra encore attendre un peu avant de voir ces nouveautés arriver.

Plus on découvre de choses sur Internet, et plus il nous en offre 😉 Tous ces nouvelles choses ne sont qu’affaires de temps, maintenant…

Et vous qu’en pensez-vous ? N’hésitez pas à commenter ! Merci de votre lecture !

Source de l’article