Zeitlich abgestimmte Texttitel

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen das track-Element wie in Abschnitt 4.8.9 des HTML5-Standards des World Wide Web Consortium (W3C) beschrieben.Mit dem track-Element können Sie zeitlich abgestimmte Texttitel, wie etwa Untertitel, Übersetzungen oder Textkommentare, zu HMTL5 video-Elementen hinzufügen.

Das track-Element

Für das Element gilt die folgende Syntax:


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

Das <track>-Element stellt eine zeitlich abgestimmte Textdatei dar, mit der Benutzern mehrere Sprachen oder Kommentare für Videos zur Verfügung gestellt werden können. Sie können mehrere <track>-Elemente verwenden und eines davon als Standardelement für den Videostart festlegen.

Der Text wird im unteren Teil des Video-Players angezeigt. Zurzeit können Position und Farbe nicht gesteuert werden, aber Sie können Text über ein Skript abrufen und auf Ihre Art anzeigen.

Formate der Titeldateien

Texttitel verwenden eine vereinfachte Version der Formate WebVTT (Web Video Text Track) oder TTML (Timed Text Markup Language) für zeitlich abgestimmte Texttitel. Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen derzeit nur Zeitsteuerungsmarker und Textbeschriftungen.

WebVTT

WebVTT-Dateien sind Textdateien im UTF-8-Format (8-Bit-Unicode Transformation Format) wie die folgende.


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

In der ersten Zeile der Datei steht das WEBVTT-Tag, auf das ein Zeilenvorschub folgt. Die Zeitsteuerungsmarker weisen das Format HH:MM:SS.sss auf. Der Start- und der End-Marker werden durch ein Leerzeichen, zwei Bindestriche und ein Größer-als-Zeichen (-->) sowie ein weiteres Leerzeichen voneinander getrennt. Die Zeitsteuerungsmarker befinden sich in einer eigenen Zeile mit einem Zeilenvorschub. Unmittelbar nach dem Marker folgt der Beschriftungstext. Textbeschriftungen können eine oder mehrere Zeilen umfassen. Zwischen den Textzeilen dürfen jedoch keine Leerzeilen liegen. Der MIME-Typ für WebVTT-Dateien ist "text/vtt".

TTML

Internet Explorer 10 und Windows Store-Apps mit JavaScript nutzen eine Untermenge des TTML (Timed Text Markup Language)-Dateiformats. Dieses Format ist in der TTML-Spezifikation definiert. Windows Internet Explorer und Windows Store-Apps mit JavaScript unterstützen die folgende Struktur.


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


Die TTML-Datei verwendet eine Namespacedeklaration und das Sprachattribut im Stammelement (tt). Darauf folgt das body- sowie ein div-Element. Die Zeitsteuerungsmarker sind im div-Element enthalten. Der tatsächliche Zeitpunkt wird jeweils durch Attribute (begin, end) des öffnenden Absatztags (<p>) festgelegt, und der Text wird durch das schließende </p>-Tag begrenzt. Leerzeilen und -zeichen werden ignoriert. Mehrere Zeilen werden jeweils durch <br/>-Tags voneinander getrennt.

Der MIME-Typ für TTML-Dateien ist "application/ttml+xml" oder "text/xml". Weitere Informationen zur TTML-Spezifikation finden Sie im Abschnitt 5.2.

Mehrere Titeldateien

Sie können auch mehr als eine zeitgesteuerte Textdatei verwenden — z. B. um Benutzern mehrere Sprachversionen oder Kommentare zur Verfügung zu stellen. Wenn Sie mehrere track-Elemente verwenden, sollten Sie eines davon als Standard festlegen, falls Ihre Seite keine diesbezügliche Angabe aufweist oder vom Benutzer keine Sprache ausgewählt wurde. Im Video-Player kann der Benutzer wechselnde track-Elemente über die integrierte Benutzeroberfläche auswählen.

Das folgende Beispiel zeigt ein Videoelement mit drei track-Elementen.


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


In diesem Beispiel wird die Videodatei mit dem source-Element definiert, und die track-Elemente geben jeweils eine Textübersetzung an. Die track-Elemente sind untergeordnete Elemente des video-Elements. Das track-Element akzeptiert die folgenden Attribute.

AttributBeschreibung

kind

Definiert den Typ des Textinhalts. Mögliche Werte: subtitles, captions, descriptions, chapters und metadata.

src

Die URL der zeitgesteuerten Textdatei.

srclang

Die Sprache der zeitgesteuerten Textdatei. Nur zur Information; wird im Player nicht verwendet.

label

Stellt eine Bezeichnung zum Identifizieren von zeitgesteuertem Text bereit. Jedes track-Element muss über eine eindeutige Bezeichnung verfügen.

default

Gibt das standardmäßige track-Element an. Wenn das Element nicht angegeben wird, wird kein track-Element angezeigt.

 

Skripterstellung für das track-Element

Das track-Element kann wie die meisten Elemente durch Skripts bearbeitet werden. Inhalte und Marker von track-Elementen können mithilfe der folgenden Objekte, Methoden und Eigenschaften verwaltet werden. Ein Titel ist eine Sammlung von Markern, die Zeitangaben und Textinhalte für ein Video enthalten.

Das textTrack- und das textTrackList-Objekt

ObjektBeschreibung

textTrack

Stellt den zeitlich abgestimmten Texttitel eines track-Elements dar. Das track-Element beinhaltet eine Reihe von Markern.

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

textTrackList

Stellt die Liste der track-Elemente dar, die mit einem bestimmten Videoelement verknüpft sind.

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

 

Die textTrackList ist ein mit dem video-Element verknüpftes Objekt, das eine Liste der textTrack-Objekte enthält. Um eine Liste der track-Elemente abzurufen, die ggf. in einem bestimmten Video verwendet werden, stellt das video-Objekt die textTracks-Eigenschaft bereit. Die textTracks-Eigenschaft ist ein Objekt vom Typ textTrackList und ein Array der textTrack-Objekte, die mit dem Video verknüpft sind.


  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

EigenschaftBeschreibung

VideoElement.textTracks.length

Gibt die Anzahl der textTrack-Objekte zurück, die mit einem video-Element verbunden sind.

VideoElement.textTracks[n]

Gibt den nten textTrack in der Titelliste des video-Elements zurück.

TrackElement.track

Gibt den Texttitel des track-Elements zurück.

 

Das folgende Beispiel zeigt, wie Sie ein textTrackList-Objekt abrufen können, das eine Liste alle Titel eines Elements zur Verfügung stellt. Die textTracks-Eigenschaft im Videoobjekt gibt das textTrackList-Objekt zurück. Das textTrackList-Objekt ist ein Array von textTrack-Objekten.


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


Das textTrackCueList- und das textTrackCue-Objekt

Die textTrack.cues-Eigenschaft gibt ein Array von textTrackCue-Objekten zurück. Ein textTrackCue-Objekt oder Marker enthält einen Bezeichner, eine Start- und Endzeit sowie weitere Daten.

ObjektBeschreibung

textTrackCueList

Ein Arrayobjekt, das alle Marker für einen bestimmten Titel darstellt.

var texttrackcuelist = trackelement.track.cues;

textTrackCue

Stellt einen Marker in einem Titel dar.

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

 

Diese Objekte machen folgende Eigenschaften verfügbar.

EigenschaftBeschreibung

textTrackCueList.Item(index)

Gibt den Texttitelmarker für einen bestimmten Index zurück.

textTrackCueList.Length

Gibt die Anzahl der Texttitelmarker in der Liste zurück.

textTrack.cues

Gibt ein textTrackCueList-Objekt zurück.

textTrack.activeCues

Gibt die derzeit aktiven Marker aus der Liste der Texttitelmarker als textTrackCueList-Objekt zurück.

textTrackCue.startTime

Gibt die Startzeit eines zeitlich abgestimmten Textmarkers zurück.

textTrackCue.endTime

Gibt die Endzeit eines zeitlich abgestimmten Textmarkers zurück.

textTrackCue.Id

Gibt einen eindeutigen Bezeichner für einen einzelnen Marker zurück.

textTrackCue.Pause-on-exit

Gibt an, ob das Video angehalten werden soll, wenn die angegebene endTime erreicht wird.

textTrackCue.text

Gibt den Textwert von TextTrackCue zurück.

textTrackCue.Track

Gibt das Texttitelobjekt zurück, zu dem der textTrackCue gehört, oder andernfalls "NULL".

 

Diese Objekte machen folgende Methoden verfügbar.

MethodeBeschreibung

textTrackCueList.getCueByID(id)

Ruft einen Marker anhand der ID aus der textTrackCueList ab.

textTrackCue.getCueAsHTML()

Gibt den Text eines Texttitelmarkers als Dokumentfragment aus HTML-Elementen und anderen DOM-Knoten (Document Object Model) zurück.

 

Das textTrackCue-Objekt macht folgende Ereignisse verfügbar:

EreignisBeschreibung

Exit

Wird ausgelöst, wenn ein Marker beendet ist.

Enter

Wird ausgelöst, wenn ein Marker aktiv ist.

 

Verwenden von Markern

Mit der cues-Eigenschaft im track-Element können Sie ein Array oder eine Liste aller Marker in diesem Titel abrufen. Die textTrack.cues-Eigenschaft gibt ein Array von textTrackCue-Objekten zurück. Ein textTrackCue-Objekt oder Marker enthält einen Bezeichner, eine Start- und Endzeit sowie Text.

Abrufen des aktuellen Markers

Im Gegensatz zur cues-Eigenschaft, die alle Marker für einen Titel abruft, ruft die activeCues-Eigenschaft nur die derzeit angezeigten Marker ab. Im folgenden Beispiel werden startTime und endTime des angezeigten Untertitels dargestellt.


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


Abrufen alle Marker

Im folgenden Beispiel werden alle Marker abgerufen, die mit einem Titel verknüpft sind, und in einem select-Feld angezeigt. Wenn Sie auf ein Element im Feld klicken, wird der entsprechende Marker im Video angezeigt. Mithilfe der Suche können Sie die Ergebnisse nach bestimmten Schlüsselwörtern filtern.


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


API-Referenz

HTML5 Audio and Video

Beispiele und Lernprogramme

HTML5-Beispiel für zeitlich abgestimmte Texttitel
Barrierefreie Videos mit zeitlich abgestimmten Texttiteln

Demos für die Internet Explorer-Testversion

HTML5 Video Caption Maker
IE10 Video Captioning

IEBlog-Beiträge

HTML5-Videountertitelung

Spezifikation

HTML5: Abschnitt 4.8.10.12.5

Verwandte Themen

Audio
Video

 

 

Anzeigen:
© 2014 Microsoft