Objets TextTrack dynamiques

Vous pouvez ajouter des objets TextTrack et TextTrackCue de sous-titres dynamiquement dans vos applications vidéo HTML5 en utilisant l’une des nouvelles méthodes multimédias.

Internet Explorer 11 prend désormais en charge trois nouvelles méthodes pour ajouter des objets TextTrack et TextTrackCue directement à partir de votre application, comme indiqué dans la spécification HTML5 du W3C. Les nouvelles méthodes sont les suivantes :

MéthodeDescription
addTextTrack Ajoute un objet TextTrack à la vidéo active.
addCue Ajoute un nouvel objet TextTrackCue à TextTrack.
removeCue Supprime un objet TextTrackCue de l’objet TextTrack.

 

Dans Internet Explorer 10, vous ajoutez des sous-titres à une vidéo en créant un fichier TTML (Timed Text Markup Language) ou WebVTT (Web Video Text Track) et en le chargeant avec l’élément Track. Cela fonctionnait bien si vous aviez vos piles (cues) créées à l’avance, mais que vous ne pouviez pas modifier le texte une fois le fichier chargé. IE11 offre davantage de flexibilité en vous permettant d’ajouter des pistes et des piles à une vidéo sans avoir besoin d’un fichier. Cela permet l’ajout de sous-titres à davantage d’applications pour plusieurs raisons. Quand vous envoyez un fichier TTML ou WebVTT à partir d’un serveur Web, le type mime correct doit être transmis. Les serveurs sont souvent configurés pour les types mime vidéo mais pas pour les types mime texte. Un fichier de sous-titre doit être envoyé au client sous la forme d’un fichier texte simple à l’aide de XMLHttpRequest (XHR), en ignorant le type mime TTML ou WebVTT requis. Les piles peuvent être envoyées en contenant uniquement l’heure de début et l’heure de fin, ainsi que le message, puis ajoutées à une piste au moment de l’exécution sur le client.

Vous pouvez également créer des outils de sous-titres pour écrire des sous-titres pendant que vous regardez une vidéo, tels que HTML5 Video Caption Maker. Au fur et à mesure que vous créez de nouvelles piles, vous pouvez les ajouter au texttrack, puis les tester immédiatement avec la vidéo.

Ajouter des objets TextTrack et TextTrackCue

Pour ajouter des objets TextTrack et TextTrackCue, créez tout d’abord TextTrack par programme. Utilisez la méthode addTextTrack pour créer un TextTrack vide attaché à l’élément vidéo. Vous pouvez ajouter des sous-titres au TextTrack en appelant addCue avec l’heure de début et l’heure de fin, puis le message texte à afficher en tant que paramètres.

Remarque  Vous pouvez ajouter des piles uniquement à un TextTrack créé à l’aide de addTextTrack. IE11 lève InvalidStateError dans le cas d’un TextTrack chargé par fichier avec l’élément Track.

L’élément vidéo dans l’exemple suivant utilise les attributs controls, autoplay et muted pour fournir les contrôles de lecture intégrés, démarrer la vidéo durant son chargement et désactiver le son. Ces attributs sont true s’ils sont présents, false dans le cas contraire. Vous n’avez donc pas à assigner de valeur. Utilisez l’élément source pour définir le fichier source video. Cet exemple spécifie un fichier vidéo générique, vous pouvez donc utiliser un fichier mp4 quelconque.

L’heure de début, l’heure de fin et un simple message de sous-titre pour les objets TextTrackCue sont créés dans une boucle. L’heure de début et l’heure de fin sont définies afin que chaque message s’affiche pendant cinq secondes. Pour plus d’informations sur l’utilisation de vidéo HTML5, voir Comment utiliser HTML5 pour lire des fichiers vidéo sur votre page Web.


<!DOCTYPE html >

<html >
  <head>
    <title>Add Text Tracks example</title>
</head>
<body>

<video id="video1" controls="controls" muted="muted">
     <!-- change to your own mp4 video file -->
  <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4" />   
  HTML5 Video not supported 
</video>

 <script>
   var video = document.getElementById("video1");
   var startTime, endTime, message;
   var newTextTrack = video.addTextTrack("captions", "sample");
   newTextTrack.mode = newTextTrack.SHOWING; // set track to display
   // create some cues and add them to the new track 
   for (var i = 0; i < 30; i++) {
     startTime = i * 5;
     endTime = ((i * 5) + 5);
     message = "This is number " + i;
     newTextTrack.addCue(new TextTrackCue(startTime, endTime, message));
   }
   video.play();
  </script>
</body>
</html>


Supprimer un TextTrackCue d’un objet TextTrack

Vous pouvez supprimer un TextTrackCue existant à l’aide de removeCue. Cet exemple commence à lire la vidéo, puis récupère les piles à afficher. Quand il détecte la deuxième pile, il la supprime à l’aide de removeCue avant qu’elle ne soit affichée.


<!DOCTYPE html >
<html >
  <head>
    <title>Remove Cue example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>

<video id="video1" controls muted autoplay>
    <source src="video.mp4">
    HTML5 Video not supported 
</video>

 <script type="text/javascript">
    var video = document.getElementById("video1");
    var beginTime, endTime, message; 
    var newTextTrack = video.addTextTrack("captions", "sample");
    newTextTrack.mode = newTextTrack.SHOWING; // set track to display
    // create some cues and add them to the new track 
    for(var i=0;i<10;i++){
        beginTime =  i * 5 ;
        endTime = ( (i * 5) +  5);
        message =  "This is number " + i; 
        newTextTrack.addCue(new TextTrackCue(beginTime, endTime, message));
    }
    //  Watch for cue change events
    newTextTrack.addEventListener("cuechange", function () {
            // get current cue, and remove it if it's number 2
            var currentCue = newTextTrack.activeCues[0];             
            if (currentCue.text == "This is number 2") {
                newTextTrack.removeCue(currentCue)
            }            
        },false);
     
  </script>
</body>
</html>


Quand vous utilisez la méthode removeCue, l’objet TextTrackCue doit correspondre à un TextTrackCue dans la même piste. Dans le cas contraire, vous obtiendrez une exception NotFoundError.

Rubriques connexes

Comment utiliser HTML5 pour lire des fichiers vidéo sur votre page Web
TextTrackCue
addTextTrack
removeCue
addCue

 

 

Afficher:
© 2014 Microsoft