Pistas de texto temporizadas

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript admiten el elemento track, tal y como se describe en la sección 4.8.9 del estándar HTML5 del World Wide Web Consortium (W3C).El elemento track permite agregar pistas de texto temporizadas, como subtítulos, traducciones o comentarios de texto a elementos de videoHTML5.

El elemento track

La sintaxis del elemento es la siguiente.


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

El elemento <track> representa un archivo de texto temporizado que proporciona a los usuarios varios idiomas o comentarios para vídeos. Puedes usar varias pistas y definir una como predeterminada para usarla cuando comienza el vídeo.

El texto se muestra en la parte inferior del reproductor de vídeo. En este momento no se pueden controlar la posición y el color, pero puedes recuperar texto a través del script y mostrarlo como quieras.

Formatos de archivos de pista

Las pistas de texto usan una versión simplificada de los formatos de archivo de texto temporizado Lenguaje de marcado de texto sincronizado (TTML) o Web Video Text Track (WebVTT). Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript actualmente admiten solo indicadores de tiempo y subtítulos de texto.

WebVTT

Los archivos WebVTT son archivos de texto con el formato de transformación Unicode de 8 bits (UTF-8) que se ven como el siguiente.


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

El archivo comienza con la etiqueta WEBVTT en la primera línea, seguida por un avance de línea. Los indicadores de tiempo están en formato HH:MM:SS.sss. Los indicadores Inicio y Fin están separados por un espacio, dos guiones, un signo mayor que (-->), y otro espacio. Los indicadores de tiempo están en una línea con un avance de línea. Inmediatamente después del indicador está el texto de imagen. Los subtítulos de texto pueden tener una o más líneas. La única restricción es que no debe haber líneas en blanco entre líneas de texto. El tipo MIME para archivos WebVTT es "text/vtt".

TTML

Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript utilizan un subconjunto del formato de archivo TTML (lenguaje de marcado de texto sincronizado), que se define en la especificación de TTML. Windows Internet Explorer y las aplicaciones de la Tienda Windows con JavaScript admiten la siguiente estructura.


<?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>


El archivo TTML usa una declaración de espacio de nombres y el atributo de idioma en el elemento raíz (tt). Esto va seguido por body y un elemento div. El elemento div incluye los indicadores de tiempo. Los tiempos reales se establecen como atributos (begin, end) de la etiqueta de apertura de párrafo (<p>) y el texto está delimitado por la etiqueta de cierre </p>. Las líneas y los espacios en blanco se ignoran. Si hay varias líneas, aparecen separadas por etiquetas <br/>.

El tipo MIME para archivos TTML es "application/ttml+xml" o "text/xml". Para obtener más información, consulta la Sección 5.2 de la especificación TTML.

Varios archivos de pista

Se puede usar más de un archivo de texto temporizado—por ejemplo, para proporcionar a los usuarios varios idiomas o comentarios alternativos. Si usas varias pistas, debes establecer una como predeterminada para usarla si tu página no especifica ninguna pista o si el usuario no ha seleccionado un idioma. En el reproductor de vídeo, el usuario puede elegir pistas alternativas mediante una interfaz de usuario integrada.

En el siguiente ejemplo, se muestra un elemento de vídeo con tres elementos de pista.


<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>


En este ejemplo, se usa el elemento source para definir el archivo de vídeo y todos los elementos track especifican una traducción de texto. Los elementos track son elementos secundarios del elemento video. El elemento track acepta los siguientes atributos.

AtributoDescripción

kind

Define el tipo de contenido de texto. Algunos valores posibles son los siguientes: subtitles, captions, descriptions, chapters, metadata.

src

URL del archivo de texto temporizado.

srclang

Idioma del archivo de texto temporizado. Para fines informativos; no se usa en el reproductor.

label

Proporciona una etiqueta que se puede usar para identificar el texto temporizado. Cada pista debe tener una etiqueta única.

default

Especifica el elemento de pista predeterminado. Si no hay ninguno especificado, no se muestra ninguna pista.

 

Scripting del elemento track

Al igual que la mayoría de los elementos, el elemento track puede manipularse mediante scripting. Los siguientes objetos, métodos y propiedades están disponibles para administrar indicadores y contenido de pistas. Una pista es una colección de indicadores que proporciona el tiempo y el contenido de texto relativos a un vídeo.

Los objetos textTrack y textTrackList

ObjetoDescripción

textTrack

Representa la pista de texto temporizada de un elemento track. La pista consta de una colección de indicadores.

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

textTrackList

Representa la lista de pistas asociadas con un elemento de vídeo específico.

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

 

El textTrackList es un objeto asociado con el elemento de vídeo que contiene una lista de los objetos textTrack. Para obtener una lista de las pistas usadas con un vídeo en particular (si hay alguna). el objeto video proporciona la propiedad textTracks. La propiedad textTracks es un objeto de tipo textTrackList y es una matriz de los objetos textTrack asociados con el vídeo.


  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

PropiedadDescripción

VideoElement.textTracks.length

Devuelve el número de objetos textTrack asociados con un elemento video.

VideoElement.textTracks[n]

Devuelve el elemento ntextTrack de la lista de pistas del elemento video.

TrackElement.track

Devuelve la pista de texto del elemento track.

 

En el siguiente ejemplo, se muestra cómo obtener un objeto textTrackList, que proporciona una lista de todas las pistas de un elemento. La propiedad textTracks en el objeto de vídeo devuelve el objeto textTrackList. El objeto textTrackList es una matriz de objetos 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>


Los objetos textTrackCueList y textTrackCue

La propiedad textTrack.cues devuelve una matriz de objetos textTrackCue. Un objeto textTrackCue, o indicador, incluye un identificador, un tiempo de inicio y fin y otros datos.

ObjetoDescripción

textTrackCueList

Un objeto de matriz que representa todos los indicadores para una pista específica.

var texttrackcuelist = trackelement.track.cues;

textTrackCue

Representa un indicador en una pista.

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

 

Estos objetos exponen las siguientes propiedades.

PropiedadDescripción

textTrackCueList.Item(index)

Devuelve el indicador de la pista de texto que se corresponde con un índice determinado.

textTrackCueList.Length

Devuelve el número de indicadores de pistas de texto de la lista.

textTrack.cues

Devuelve un objeto textTrackCueList.

textTrack.activeCues

Devuelve los indicadores de la lista de indicadores de pistas de texto que se encuentran activos, como un objeto textTrackCueList.

textTrackCue.startTime

Devuelve el tiempo de inicio de un indicador de texto temporizado.

textTrackCue.endTime

Devuelve el tiempo de finalización de un indicador de texto temporizado.

textTrackCue.Id

Devuelve un identificador único para un indicador individual

textTrackCue.Pause-on-exit

Indica si la reproducción del vídeo debe parar cuando se alcanza el endTime especificado.

textTrackCue.text

Devuelve el valor de texto de un TextTrackCue.

textTrackCue.Track

Devuelve el objeto de pista de texto al cual pertenece el textTrackCue o, de lo contrario, "null".

 

Estos objetos exponen los siguientes métodos.

MétodoDescripción

textTrackCueList.getCueByID(id)

Obtiene un indicador del textTrackCueList con el identificador.

textTrackCue.getCueAsHTML()

Devuelve un indicador de pista de texto como un fragmento de documento que consta de elementos HTML y de otros nodos de Document Object Model (DOM).

 

El objeto textTrackCue expone los siguientes eventos:

EventoDescripción

Salir

Se activa cuando un indicador finaliza.

Entrar

Se activa cuando un indicador está activo.

 

Trabajar con indicadores

Si usas la propiedad cues en el elemento track, puedes obtener una matriz o una lista de todos los indicadores en esa pista. La propiedad textTrack.cues devuelve una matriz de objetos textTrackCue. El objeto textTrackCue, o indicador, incluye un identificador, el tiempo de inicio y fin, y el texto.

Obtener el indicador actual

A diferencia de la propiedad cues, que obtiene todos los indicadores asociados con una pista, la propiedad activeCues obtiene solo los indicadores que se muestran actualmente. En el siguiente ejemplo, aparece el startTime y el endTime del subtitulo que se está mostrando.


<!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>


Obtener todos los indicadores

En el siguiente ejemplo, se obtienen todos los indicadores asociados a una pista y se muestran en un cuadro select. Cuando haces clic en un elemento del cuadro, se reproduce ese indicador en el vídeo. Usa la búsqueda para filtrar los resultados en función de una palabra clave específica.


<!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>


Referencia de API

HTML5 Audio and Video

Ejemplos y tutoriales

Ejemplo de pista de texto temporizada HTML5
Crear vídeos accesibles con pistas de texto temporizadas

Demostraciones de la versión de prueba de Internet Explorer

HTML5 Video Caption Maker
IE10 Video Captioning

Publicaciones de IEBlog

Leyendas de vídeo HTML5

Especificación

HTML5: sección 4.8.10.12.5

Temas relacionados

Audio
Vídeo

 

 

Mostrar:
© 2014 Microsoft