Pistes de texte synchronisé

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent désormais en charge l’élément track comme décrit dans la section 4.8.9 de la norme HTML5 du World Wide Web Consortium (W3C).L’élément track vous permet d’ajouter des pistes de texte synchronisé, telles que des sous-titres, des traductions ou des commentaires de texte, à des éléments HTML5 video.

Élément track

La syntaxe de l’élément est la suivante.


<video id="mainvideo" controls autoplay loop>
  <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>
</video>

L’élément <track> représente un fichier de texte synchronisé pour fournir aux utilisateurs plusieurs langues ou commentaires pour leurs vidéos. Vous pouvez utiliser plusieurs pistes et en définir une comme piste par défaut à utiliser au démarrage de la vidéo.

Le texte s’affiche dans la partie inférieure du lecteur vidéo. Actuellement, la position et la couleur ne peuvent pas être contrôlées, mais vous pouvez extraire du texte à l’aide d’un script et l’afficher à votre guise.

Formats de fichier de piste

Les pistes de texte utilisent une version simplifiée des formats de fichier de texte synchronisé WebVTT (Web Video Text Track) ou TTML (Timed Text Markup Language). Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge uniquement les indicateurs de synchronisation et les sous-titres.

WebVTT

Les fichiers WebVTT sont des fichiers texte au format UTF-8 (8-bit Unicode Transformation Format) qui se présentent comme suit.


WEBVTT

00:00:01.878 --> 00:00:05.334
Good day everyone, my name is John Smith

00:00:08.608 --> 00:00:15.296
This video will teach you how to 
build a sand castle on any beach

Le fichier commence avec la balise WEBVTT sur la première ligne, suivie d’un saut de ligne. Les indicateurs de synchronisation sont au format HH:MM:SS.sss. Les indicateurs de début et de fin sont séparés par un espace, deux tirets, un signe supérieur à ( --> ) et un autre espace. Les indicateurs sont seuls sur une ligne suivie d’un saut de ligne. Ils sont immédiatement suivis du texte de sous-titre. Les sous-titres peuvent s’étendre sur plusieurs lignes. Par contre, il ne peut y avoir aucune ligne vide entre les lignes de texte. Le type MIME pour les fichiers WebVTT est "text/vtt".

TTML

Internet Explorer 10 et les applications du Windows Store en JavaScript font appel à un sous-ensemble du format de fichier TTML (Timed Text Markup Language), défini dans la spécification TTML. Windows Internet Explorer et les applications du Windows Store en JavaScript prennent en charge la structure suivante.


<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >
<body>
<div>

<p begin="00:00:01.878" end="00:00:05.334" >Good day everyone, my name is John Smith</p>
<p begin="00:00:08.608" end="00:00:15.296" >This video will teach you how to<br/>build a sand castle on any beach</p>
</div>

</body>
</tt>


Le fichier TTML utilise une déclaration d’espace de noms et l’attribut de langue dans l’élément racine (tt). Viennent ensuite l’élément body et un élément div. Les indicateurs de synchronisation se trouvent dans l’élément div. Les heures réelles sont définies en tant qu’attributs (begin, end) de la balise du paragraphe de début (<p>) et le texte est délimité par la balise </p>. Les lignes vides et les espaces sont ignorés. S’il y a plusieurs lignes, elles sont séparées par des balises <br/>.

Le type MIME des fichiers TTML est "application/ttml+xml" ou "text/xml". Voir la section 5.2 de la spécification TTML pour plus d’informations.

Fichiers à plusieurs pistes

Vous pouvez utiliser plusieurs fichiers de texte synchronisé—par exemple, pour permettre aux utilisateurs de choisir entre plusieurs langues ou plusieurs commentaires. Si vous utilisez plusieurs pistes, définissez celle à utiliser par défaut si votre page n’en spécifie aucune ou si l’utilisateur n’a choisi aucune langue. Dans le lecteur vidéo, l’utilisateur peut choisir d’autres pistes à l’aide d’une interface utilisateur intégrée.

L’exemple suivant montre un élément vidéo avec trois éléments de piste.


<video id="mainvideo" controls autoplay loop>
  <source src="video.mp4" type="video/mp4">
  <track id="enTrack" src="engtrack.vtt" label="English" kind="subtitles" srclang="en" default>
  <track id="esTrack" src="spntrack.vtt" label="Spanish" kind="subtitles" srclang="es">
  <track id="deTrack" src="grmtrack.vtt" label="German" kind="subtitles" srclang="de">
</video>


Dans cet exemple, l’élément source est utilisé pour définir le fichier vidéo et les éléments track indiquent chacun une langue pour le texte. Les éléments track sont des enfants de l’élément video. L’élément track accepte les attributs suivants.

AttributDescription

kind

Définit le type du contenu texte. Les valeurs possibles sont : subtitles, captions, descriptions, chapters et metadata.

src

URL du fichier de texte synchronisé.

srclang

Langue du fichier de texte synchronisé. Pour information uniquement ; non utilisé dans le lecteur.

label

Fournit une étiquette qui peut être utilisée pour identifier le texte synchronisé. Chaque piste doit avoir sa propre étiquette.

default

Spécifie l’élément de piste (track) par défaut. Si aucune valeur n’est spécifiée pour cet attribut, aucune piste n’est affichée.

 

Script de l’élément track

Comme la plupart des éléments, l’élément track peut être manipulé à l’aide d’un script. Les objets, méthodes et propriétés suivants permettent de gérer le contenu et les indicateurs des pistes. Une piste est un ensemble d’indicateurs qui indique la durée et le contenu texte d’une vidéo.

Objets textTrack et textTrackList

ObjetDescription

textTrack

Représente la piste de texte synchronisé d’un élément track. La piste est constituée de plusieurs indicateurs.

var texttract = document.getElementByID("trackElement");

textTrackList

Représente la liste des pistes associées à un élément vidéo spécifique.

var texttracklist = document.getElementById("videoelement").textTracks;

 

L’objet textTrackList est un objet associé à l’élément vidéo qui contient une liste des objets textTrack. Pour obtenir une liste des pistes utilisées avec une vidéo (le cas échéant), l’objet video fournit la propriété textTracks. La propriété textTracks est un objet de type textTrackList et est un tableau des objets textTrack associés à la vidéo.


  var oVideo = document.getElementById(“videoElement”);
  var oTTlist = oVideo.textTracks;   // get the textTrackList 
  var oTrack = oTTlist[0];   	    // get the first text track on the video object
  var oTrack.track

PropriétéDescription

VideoElement.textTracks.length

Retourne le nombre d’objets textTrack associés à un élément video.

VideoElement.textTracks[n]

Retourne le nième objet textTrack dans la liste des pistes de l’élément video.

TrackElement.track

Retourne la piste de texte de l’élément track.

 

L’exemple suivant montre comment obtenir un objet textTrackList, qui fournit une liste de toutes les pistes d’un élément. La propriété textTracks sur l’objet vidéo retourne l’objet textTrackList. L’objet textTrackList est un tableau des objets textTrack.


<!DOCTYPE html >

<html >
<head>
    <title>Track list example</title>
  <script type="text/javascript">
      function getTracks() {
         // get list of tracks
          var allTracks = document.getElementById("video1").textTracks;
         
         //append track label
          for (var i = 0; i < allTracks.length; i++) {
              document.getElementById("display").innerHTML += (allTracks[i].label + "<br/>");  
          }
      }
  </script>
</head>
<body>
<video id="video1" >
<source src="video.mp4">
  <track id="entrack" label="English subtitles" kind="captions" src="example.vtt" srclang="en">
  <track id="sptrack" label="Spanish subtitles" kind="captions" src="examplesp.vtt" srclang="es">
  <track id="detrack" label="German subtitles" kind="captions" src="examplede.vtt" srclang="de">
</video>
<button onclick="getTracks();">click</button>
<div id="display"></div>
</body>
</html>


Objets textTrackCueList et textTrackCue

La propriété textTrack.cues retourne un tableau des objets textTrackCue. Un objet textTrackCue ou indicateur comprend un identificateur, une heure de début et de fin et d’autres données.

ObjetDescription

textTrackCueList

Un objet de tableau qui représente tous les indicateurs pour une piste spécifique.

var texttrackcuelist = trackelement.track.cues;

textTrackCue

Représente un indicateur dans une piste.

var texttrackcue = texttrackcuelist[i];  // where i == an index into the track cue list array.

 

Ces objets exposent les propriétés suivantes :

PropriétéDescription

textTrackCueList.Item(index)

Retourne l’indicateur de piste de texte correspondant à un index donné.

textTrackCueList.Length

Retourne le nombre d’indicateurs de piste de texte dans la liste.

textTrack.cues

Retourne un objet textTrackCueList.

textTrack.activeCues

Retourne les indicateurs de la liste des indicateurs de piste de texte qui sont actuellement actifs en tant qu’objet textTrackCueList.

textTrackCue.startTime

Retourne l’heure de début d’un indicateur de texte chronométré.

textTrackCue.endTime

Retourne l’heure de fin d’un indicateur de texte chronométré.

textTrackCue.Id

Retourne l’identificateur unique d’indicateur.

textTrackCue.Pause-on-exit

Indique si la vidéo doit s’arrêter lorsqu’elle atteint l’heure de fin spécifiée par l’attribut endTime.

textTrackCue.text

Retourne la valeur de texte chronométré d’un élément TextTrackCue.

textTrackCue.Track

Retourne l’objet de piste de texte auquel l’objet textTrackCue appartient ou "null".

 

Ces objets exposent les méthodes suivantes :

MéthodeDescription

textTrackCueList.getCueByID(id)

Obtient un indicateur de l’objet textTrackCueList à partir de son ID.

textTrackCue.getCueAsHTML()

Retourne le texte de l’indicateur de piste de texte sous forme de fragment de document constitué d’éléments HTML et de nœuds DOM (Document Object Model).

 

L’objet textTrackCue expose les événements suivants :

ÉvénementDescription

Exit

Se déclenche lorsqu’un indicateur n’est plus actif.

Enter

Se déclenche lorsqu’un indicateur est actif.

 

Utilisation des indicateurs

Utilisez la propriété cues sur l’élément track pour obtenir un tableau ou une liste de tous les indicateurs sur cette piste. La propriété textTrack.cues retourne un tableau des objets textTrackCue. L’objet textTrackCue ou indicateur comprend un identificateur, une heure de début et de fin et du texte.

Obtenir l’indicateur actuel

Contrairement à la propriété cues, qui obtient tous les indicateurs associés à une piste, la propriété activeCues obtient uniquement ceux qui sont actuellement affichés. L’exemple suivant montre les attributs startTime et endTime du sous-titre affiché.


<!DOCTYPE html >

<html >
<head>
    <title>Current cue example</title>
  <script type="text/javascript">
      function eID(elm) {
          return document.getElementById(elm);  // create short cut to getElementById()
      }

      // after elements are loaded, hook the cuechange event on the track element
      window.addEventListener("load", function () {
          eID("track").addEventListener("cuechange", function (e) {
              var myTrack = e.target.track;  // the target property is the track element
              var myCues = myTrack.activeCues;   // activeCues is an array of current cues.
              //  display the start and end times
              eID("display").innerHTML = myCues[0].startTime + " --> " + myCues[0].endTime;
          }, false);

      }, false);
     
  </script>
</head>
<body>
<video id="video1"  controls autoplay>
 <source src="movie.mp4"  >
 <track id='track' label='English captions' src='captions.vtt' kind='subtitles' srclang='en' default  > 
</video>
<div id="display"></div>
</body>
</html>


Obtenir tous les indicateurs

L’exemple suivant obtient tous les indicateurs associés à une piste et les affiche dans une boîte select. Lorsque vous cliquez sur un indicateur dans la boîte, cet indicateur est activé sur la vidéo. Utilisez la recherche pour filtrer les résultats avec un mot clé spécifique.


<!DOCTYPE html>
<head>
<title>All cues example</title>
<script>

function loadCaptions(track) {
// retrive cues for track element
    var cues = track.track.cues;
    var list = document.getElementById('results');
    for (i = 0; i < cues.length; i++)
    {
        var x = cues[i].getCueAsHTML(); //get the text of the cue
        var option = document.createElement("option"); // create an option in the select list
        option.text = x.textContent;        // assign the text to the option 
        option.setAttribute('data-time', cues[i].startTime);  // assign an attribute called data-time to option
        list.add(option);       // add the new option 
    }    
}

function playCaption(control) 
{
    var o = control.options[control.options.selectedIndex];  //get the option the user clicked
    var t = o.getAttribute('data-time');        // get the start time of that option
    var video = document.getElementById('video');   // get video element. 
    video.currentTime = t - 0.1;                //  move the video to start at the time we want (subtrackting a fudge factor)
}

function search(text) 
{
    var cues = eID('track').track.cues;     // retrieve a list of cues from current track
    var list = eID('results');              // get the select box object
    list.innerHTML = '';                    // clear the select box 
    for (i = 0; i < cues.length; i++) {     // scan through list of cues
        var cuetext = cues[i].getCueAsHTML().textContent;  // get the text content of the current element in cue lists 
        if (cuetext.toLowerCase().indexOf(text.toLowerCase()) != -1)  // does the cue contain the key we're looking for? 
        {                                                             // if a match, create a new option to add to the select box
            var option = document.createElement("option");         
            option.text = cuetext;                                  
            option.setAttribute('data-time', cues[i].startTime);
            list.add(option);
        }
    }   
}

</script>
</head>

<body>
   <video id='video' controls autoplay loop>
     <source src='movie.mp4'>
     <track id='track' label='English captions' src='captions.vtt' kind='subtitles' srclang='en' default onload='loadCaptions(this)'>
   </video>
   <div>Search captions <input onkeyup='search(this.value)' /> </div>
   <div>Click a caption to jump to that time in the video</div>
   <div><select size='10' id='results' onchange='playCaption(this)'></select></div>

</body>
</html>


Informations de référence sur les API

HTML5 Audio and Video

Exemples et didacticiels

Exemple de piste de texte synchronisé en HTML5
Rendre vos vidéos accessibles à l’aide de pistes de texte synchronisé

Démonstrations du site Internet Explorer Test Drive

HTML5 Video Caption Maker
IE10 Video Captioning

Billets IEBlog

Sous-titrage vidéo HTML5

Spécification

HTML5: Section 4.8.10.12.5

Rubriques connexes

Audio
Vidéo

 

 

Afficher:
© 2014 Microsoft