Gestalten von SDP-Untertiteln (Simple Delivery Profile)

Mithilfe von SDP (Simple Delivery Profile) können Sie in Ihren HTML5-Videos Untertitel positionieren und gestalten.

In Internet Explorer 11 können Sie mit SDP Untertiteltext gestalten und auf dem Videobildschirm positionieren. SDP ist ein neuer W3C-Standard für die Erstellung von Untertiteln, mit dem Sie Ihren Text frei in einem Videoframe positionieren und gestalten können, um ihn besser sichtbar zu machen oder hervorzuheben.

Auf der Grundlage von TTML (Timed Text Markup Language) haben Sie folgende Möglichkeiten:

  • Ändern der Textfarbe
  • Erstellen vollfarbiger Hintergründe
  • Ändern von Schriftart, Schriftgrad und Schriftschnitt
  • Animieren des Texts auf dem Bildschirm

Diese neuen Funktionen ermöglichen Folgendes:

  • Simulieren von Sprechblasen, wenn mehrere Sprecher angezeigt werden
  • Festlegen von Farben für Text, sodass sich dieser besser von hellen oder dunklen Hintergründen abhebt
  • Buchstabenweises Einblenden von Text, um dessen Wirkung zu verstärken

Erstellen von SDP-Text für IE11

Das Erstellen von SDP-basiertem TTML-Code für IE11 unterscheidet sich nicht großartig vom Erstellen von TTML-Untertitelcode für Internet Explorer 10.

Die Headerinformationen ähneln den Headerinformationen älterer Versionen und enthalten folgende Elemente für Namespace und Version:

  • Die erste Zeile definiert, dass es sich um eine XML-Datei handelt: <?xml version="1.0" encoding="utf-8"?>
  • Die nächste Zeile enthält die Sprach- und Namespacedefinition.
    <tt xml:lang="en-us" xmlns="http://www.w3.org/ns/ttml" 
       xmlns:s="http://www.w3.org/ns/ttml#styling"  
       xmlns:p="http://www.w3.org/ns/ttml#parameter">
    
    

Der <head>-Bereich der Seite enthält die Abschnitte für Profil, Stil und Layout. Der Profilabschnitt ist durch ein <p:profile>-Tag gekennzeichnet und enthält den Profilnamen:

<p:profile use="http://www.w3.org/ns/ttml/profile/sdp-us"/>

Der Stilabschnitt definiert die Textstile der Seite. Zu den Stilen zählt Folgendes:

  • ID für den Stil.
  • Anzeigepräferenz (automatisch, keine usw.).
  • Textfarbe.
  • Textausrichtung (linksbündig, zentriert, rechtsbündig).
  • Farbe und Breite für den Umriss (oder Strich).
  • Hintergrundfarbe und -transparenz
  • Ursprung (x/y-Position) des Texts, angegeben in Prozent (z. B. 30 %)
  • Viewportgröße (Größe des Textfelds oder Hintergrunds), angegeben in Prozent (z. B. 75 %)

Der Layoutabschnitt definiert folgende Attribute für bis zu vier Regionen:

  • ID für eine Region
  • Regionen – grundlegende Positionseinheit auf dem Bildschirm
  • Start- und Endzeit für Rollup-Text.
  • Anzeigepräferenz – Wird häufig zum Aktivieren von spezifischem Text verwendet, wenn dieser durch den Stil deaktiviert wurde.
Dies sind die grundlegenden Tags für den Einstieg. Es stehen noch eine ganze Reihe weiterer Stile und Layoutoptionen zur Verfügung. Entsprechende Beschreibungen finden Sie in der W3C-Spezifikation TTML-SDP für Untertitel (US).

Die W3C-Spezifikation enthält einige Regeln, die bei der Gestaltung von Untertiteln einzuhalten sind. Im Anschluss finden Sie eine Liste mit den wichtigsten Punkten.

  • Alle Dokumente müssen über ein tt-Element, ein head-Element und ein body-Element verfügen.
  • Alle Dokumente müssen sowohl über ein styling- als auch über ein layout-Element verfügen.
  • div- oder span-Elemente können nicht geschachtelt werden. Zulässig ist jeweils nur eine Ebene pro Element. Ein span-Element kann als untergeordnetes Element eines div-Elements verwendet werden.

Hinweis  Ein Dokument darf keine zwei Elemente enthalten, bei denen die lexikalische Reihenfolge der Elemente von der temporalen Reihenfolge abweicht.

Marker müssen also streng chronologisch nach Startzeit sortiert werden. Beispiel:

Korrekt

<p region="bottomMid" begin='00:00:00.101' end='00:00:05.000'> This is the first caption</p>
<p region="topMid" begin='00:00:05.000' end='00:00:10.000'> This is the second caption</p>
<p region="topLeft" begin='00:00:10.000' end='00:00:15.000'> This is the third caption</p>
<p region="bottomRight" begin='00:00:15.000' end='00:00:20.000'> This is the fourth caption</p> 

Falsch

<p region="bottomMid" begin='00:00:00.101' end='00:00:05.000'> This is the first caption</p>
<p region="topLeft" begin='00:00:10.000' end='00:00:15.000'> This is the third caption</p>
<p region="topMid" begin='00:00:05.000' end='00:00:10.000'> This is the second caption</p>
<p region="bottomRight" begin='00:00:15.000' end='00:00:20.000'> This is the fourth caption</p> 

In diesem Beispiel befindet sich der dritte Untertitel vor dem ersten. Die vollständige TTML-Spezifikation lässt zwar eine beliebige Reihenfolge von Untertiteln zu, bei SDP müssen die begin-Werte jedoch in chronologischer Reihenfolge vorliegen. Die end-Werte können in beliebiger Reihenfolge angegeben werden.

Verwenden von SDP in Apps

Hier sehen Sie ein Beispiel, in dem Text mithilfe von SDP gestaltet und positioniert wird. Das Beispiel besteht aus zwei Dateien: Bei der ersten Datei handelt es sich um die HTML-Datei, die das Video anzeigt und die Titeldatei liest. Die zweite Datei liegt im TTML-Format vor und enthält die Untertitel im SDP-Format.

Dieses HTML-Beispiel lädt ein generisches Video und die Titeldatei. Da die Datei nicht mit einem bestimmten Video synchronisiert ist, können Sie zu Testzwecken eine beliebige MP4-Datei verwenden.


<!DOCTYPE html>
<html>
    <head>
        <title>SDP Test</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
    <body>
        <video src="video.mp4" controls muted autoplay width="800">
            <track src="SDPTest.ttml" label="SDP Examples" default/>
        </video>
    </body>
</html>


Bei diesem Beispiel handelt es sich um die Datei "SDPTest.ttml". Diese positioniert in einem Intervall von je fünf Sekunden vier verschiedene farbige Meldungen auf dem Videobildschirm.


<?xml version="1.0" encoding="utf-8"?>
<tt xml:lang="en-us" xmlns="http://www.w3.org/ns/ttml" 
    xmlns:s="http://www.w3.org/ns/ttml#styling" 
    xmlns:p="http://www.w3.org/ns/ttml#parameter">
  <head>
    <p:profile use="http://www.w3.org/ns/ttml/profile/sdp-us"/>
    <styling>
      <!-- define styles for text color and position --> 
      <style xml:id="bottomMidStyle" s:textAlign="center" s:textOutline="red 1px" s:backgroundColor="#ff000044" 
       s:color="#ffffffff" s:origin='20% 78%' s:extent='30% 10%'/>
      <style xml:id="topMidStyle" s:textAlign="center" s:textOutline="black 1px" s:backgroundColor="#00ff0088" 
       s:color="#ff11ffff" s:origin='20% 40%' s:extent='60% 18%'/>
      <style xml:id="topLeftStyle" s:textAlign="left" s:textOutline="blue 1px" s:backgroundColor="transparent" 
       s:color="#ff11ffff" s:origin='10% 10%' s:extent='30% 10%'/>
      <style xml:id="bottomRightStyle" s:textAlign="right" s:textOutline="black 1px" s:backgroundColor="white" 
       s:color="green" s:origin='70% 70%' s:extent='30% 10%'/>
    </styling>

    <layout>
      <!-- define regions for locating text -->
      <region xml:id="bottomMid" style="bottomMidStyle" />
      <region xml:id="topMid" style="topMidStyle" />
      <region xml:id="topLeft" style="topLeftStyle" />
      <region xml:id="bottomRight" style="bottomRightStyle" />
    </layout>
  </head>
  <body>
    <div style="defaultFont">
      <p region="bottomMid" begin='00:00:00.101' end='00:00:05.000'> This is a Pop-up caption</p>
      <p region="topMid" begin='00:00:05.000' end='00:00:10.000'> This is another Pop-up caption</p>
      <p region="topLeft" begin='00:00:10.000' end='00:00:15.000'> Hello from up top</p>
      <p region="bottomRight" begin='00:00:15.000' end='00:00:20.000'> And back down</p> 
   </div>
  </body>
</tt>


Verwandte Themen

Verwenden von Onlinevideos in Profiqualität: neue Spezifikationen für interoperable Untertitel
TTML-SDP für Untertitel (US)

 

 

Anzeigen:
© 2014 Microsoft