IMSC Grundlagen
IMSC ermöglicht es, Untertitel oder Bildunterschriften zu Ihrem Online-Video hinzuzufügen. In diesem Artikel führen wir Sie durch die Grundlagen, die Sie benötigen, um loszulegen, einschließlich der Grundstruktur eines Dokuments sowie der grundlegenden Schritte zum Stylen, Timing und Positionieren von Untertiteln.
Hinweis: IMSC kann für jede Art von zeitgesteuertem Text verwendet werden, den Sie in ein Webdokument einfügen möchten, nicht nur für Untertitel und Bildunterschriften. Da Untertitel und Bildunterschriften jedoch die häufigsten Anwendungsfälle für IMSC darstellen, konzentrieren wir uns auf diese. Für die Lesbarkeit verwenden wir nur den Begriff "Untertitel". Im beschriebenen technischen Kontext ist der Begriff "Untertitel" austauschbar mit "Bildunterschriften".
Was ist IMSC?
IMSC ist eine Markup-Sprache, mit der Sie zeitgesteuerten Text definieren können, um Untertitel zu digitalen Medien hinzuzufügen. Sie definiert die Struktur Ihres Untertitel-Inhalts in einem XML-Dokument. Es besteht aus einer Reihe von Elementen, mit denen Sie verschiedene Teile Ihres Untertitel-Inhalts einfügen oder umschließen können, um sie auf eine bestimmte Weise oder zu einer bestimmten Zeit erscheinen zu lassen. Viele dieser Elemente sind HTML-Funktionen ähnlich oder identisch.
Falls Ihnen XML oder HTML nicht vertraut sind, sollten Sie zuerst darüber lesen und dann hierher zurückkehren:
Hinweis: Wenn Sie wissen möchten, was Sie in realen Szenarien mit IMSC tun können, schauen Sie sich das erweiterte Beispiel am Ende dieses Tutorials an.
Minimaler IMSC-Dokument
IMSC wird immer als vollständiges XML-Dokument angegeben. Als Datei sollte es die Erweiterung "ttml" haben.
Hinweis: IMSC hat derzeit keine native Unterstützung in Browsern, aber die imscJS Polyfill kann verwendet werden, um diese Lücke zu schließen. Alle unten stehenden Beispiele werden unter Verwendung von imscJS dargestellt. Es erzeugt dynamisch HTML und CSS aus einem IMSC XML-Dokument.
Schauen wir uns ein minimales IMSC-Dokument und dessen Darstellung an:
Die wichtigsten Funktionen sind:
<tt></tt>
— Ein IMSC-Dokument beginnt immer mit dem Wurzelelement<tt>
. Sie sollten auch den Standard-Namespace des Dokuments mit dem Attributxmlns
angeben. Machen Sie sich vorerst keine Sorgen um Namespaces. Wir kommen darauf in einem separaten Leitfaden zurück.xml:lang
— Sie müssen die Sprache Ihres Inhalts mit dem Attributxml:lang
angeben. Beachten Sie, dass das Attributlang
das Präfixxml:
haben muss, im Gegensatz zu HTML. In IMSC ist<tt lang="en">
nicht korrekt — Sie müssen stets<tt xml:lang="en">
schreiben.<body></body>
— Wie in HTML enthält das<body>
-Element alle Inhalte, die Sie anzeigen möchten. Für IMSC sind dies typischerweise Untertitel-Inhalte, die Sie während bestimmter Zeitintervalle während der Videowiedergabe anzeigen möchten.<div></div>
— Das<div>
-Element wird als Container für Untertitel-Inhalte verwendet; Sie benötigen immer mindestens eins davon. Die<p>
-Elemente, die den eigentlichen Untertitel-Inhalt enthalten, haben immer ein<div>
-Element als übergeordnetes Element.<p></p>
— Textinhalte für Untertitel müssen immer in einem<p>
-Element eingeschlossen sein. Das Element beschreibt einen Textabsatz, ähnlich wie in HTML. Der Hauptunterschied besteht darin, dass es zeitgesteuert sein kann.
Timing
Das minimale IMSC-Dokument aus dem vorherigen Beispiel hatte kein Timing. Das bedeutet, dass der Untertitel-Inhalt während der gesamten Dauer des Videos angezeigt wird. Normalerweise ist das nicht das, was Sie wollen. Stattdessen möchten Sie, dass Untertitel zu einem bestimmten Zeitpunkt angezeigt und dann wieder ausgeblendet werden. Sie können eine Kombination der Timing-Attribute begin
, end
und dur
verwenden, um dies zu erreichen.
Sehen Sie sich das folgende bearbeitbare Beispiel an:
Dies umfasst die folgenden neuen Attribute:
begin
— Spezifiziert, wann der Untertitel angezeigt werden soll (in diesem Fall 1 Sekunde nach Beginn des Videos).end
— Spezifiziert, wann der Untertitel ausgeblendet werden soll (in diesem Fall 2 Sekunden nach Beginn des Videos).
Experimentieren Sie mit den Zeitwerten im Codebeispiel und drücken Sie den Reload-Button, wenn Sie fertig sind.
Hinweis: Die Endzeiten in IMSC sind nicht "inklusiv". Der Untertitel "Hello, I am Mork from Ork." wird nicht mehr angezeigt, wenn er den zweiten Zeitwert erreicht.
Sie können für das Timing auch das Attribut dur
verwenden:
Dieses Attribut kann als Alternative zum Attribut end
verwendet werden. Es definiert, "wie lange" der Untertitel nach der begin
-Zeit angezeigt wird. Im Beispiel soll der zweite Absatz 2 Sekunden lang angezeigt werden. Da er bei Sekunde 2 beginnt, wird er bei Sekunde 4 ausgeblendet.
Beachten Sie, was sich bei Sekunde 2 im Vergleich zum vorherigen Beispiel geändert hat.
Farben
Oft werden Untertitel auf einem opaken oder halbopaken Hintergrund dargestellt, um die Lesbarkeit zu verbessern. Sie können die Attribute backgroundColor
und color
verwenden, um die Farben zu ändern, wie in diesem bearbeitbaren Beispiel gezeigt:
Hier haben wir Folgendes eingeführt:
-
tts:backgroundColor
— Dieses Attribut setzt die Hintergrundfarbe des Elements, auf das es angewendet wird. In diesem Fall wird es auf das<p>
-Element angewendet, genauer gesagt auf den vom<p>
-Element erzeugten Bereich. Die Standard-Hintergrundfarbe isttransparent
. -
tts:color
— Dieses Attribut setzt die Textfarbe des Elements, auf das es angewendet wird. Die Standard-Textfarbe istwhite
.
Versuchen Sie, andere Farben für Text und Hintergrund zu setzen:
- Probieren Sie andere benannte Farben wie
lime
oderaqua
. - Verwenden Sie Hexadezimalwerte wie
#00ff00
oder#00ffff
. - Sie können andere Farbschemata wie
rgb(0 255 255)
verwenden. - Versuchen Sie schließlich halbtransparente Varianten wie
rgb(0 0 0 / .8)
.
Hinweis:
Machen Sie sich vorerst keine Sorgen um Namespaces. Wir erklären die Bedeutung von xmlns:tts
und tts:backgroundColor
in einem separaten Leitfaden.
Wie im IMSC-Styling-Leitfaden erklärt, ist es möglich, eine Sammlung von Styling-Eigenschaften zu definieren, die mehrfach verwendet werden können. Der Stil s1
unten wird dreimal angewendet:
<tt xmlns="http://www.w3.org/ns/ttml"
xmlns:tts="http://www.w3.org/ns/ttml#styling"
xml:lang="en">
<head>
<styling>
<style xml:id="s1" tts:color="yellow" tts:fontStyle="italic"/>
</styling>
</head>
<body>
<div>
<p>
Hello, I am <span style="s1">Mork</span> from <span style="s1">Ork</span>.<br/>
I come from another <span style="s1">planet</span>.
</p>
</div>
</body>
</tt>
Position, Breite und Länge
Wenn Sie keine Position ausdrücklich angeben, wird der Untertitel standardmäßig in der oberen linken Ecke des Videos angezeigt. In der Regel möchten Sie jedoch, dass Ihr Untertitel an einer anderen Stelle angezeigt wird, beispielsweise in der unteren Mitte des Videos. Sie müssen eine Region definieren, um einen Untertitel zu positionieren.
Sehen Sie unten ein minimales Dokument, das Regionen zur Positionierung verwendet.
<tt xmlns="http://www.w3.org/ns/ttml"
xmlns:tts="http://www.w3.org/ns/ttml#styling"
xml:lang="en">
<head>
<layout>
<region tts:origin="10% 80%"
tts:extent="80% 20%"
xml:id="bottom"/>
<region tts:origin="10% 10%"
tts:extent="80% 20%"
xml:id="top"/>
</layout>
</head>
<body>
<div>
<p region="bottom"
tts:backgroundColor="black">
Hello, I am Mork from Ork.
</p>
</div>
</body>
</tt>
Dies umfasst folgende neue Funktionen:
<head></head>
— Wie in HTML fungiert das<head>
-Element als Container für alle Elemente, die Sie in ein IMSC-Dokument aufnehmen möchten, die jedoch keine Untertitel-Inhalte sind. Meistens wird es verwendet, um Metadaten über den Inhalt oder das Dokument zu speichern, sowie Informationen zur Positionierung und Formatierung.<layout></layout>
— Dieses Element fungiert als Wrapper für Positionierungsinformationen. Es enthält<region>
-Elemente als Kinder.<region></region>
— Dieses Element kann verwendet werden, um Regionen zu definieren, rechteckige Bereiche, die Sie über Ihrem Video platzieren können. Diese haben eine definierte Position, Breite und Höhe sowie eine eindeutige ID (über das Attributid
). Sie können es sich wie ein<div>
-Element in HTML vorstellen, das über CSS eine absolute Position, Breite und Höhe erhält. Wenn Untertitel-Inhalte einer Region zugeordnet sind (indem die ID der Region im Attributregion
angegeben wird), werden sie innerhalb des von dieser Region definierten Bereichs angezeigt.xml:id
- Das Attributxml:id
. Der Wert des Attributsxml:id
ist eine Zeichenkette, mit der Untertitel-Inhalte einer Region zugeordnet werden können.tts:origin
— Dieses Attribut definiert die Position der oberen linken Ecke der Region. Es verwendet die Maßeinheit % (Prozentsatz). Der erste Wert definiert, wie weit die obere linke Ecke der Region nach rechts verschoben wird — in diesem Fall platziert der Wert10%
die Region 10% der Video-Breite nach rechts. Der zweite Wert definiert, wie weit die obere linke Ecke der Region nach unten verschoben wird — in diesem Fall wird die obere linke Ecke der Region80%
der Video-Höhe nach unten verschoben.tts:extent
— Dieses Attribut definiert die Breite und Höhe der Region. In diesem Fall setzt80%
die Breite auf 80% der Video-Breite, und20%
setzt die Höhe der Region auf 20% der Video-Höhe.region
— Das Setzen dieses Attributs auf Untertitel-Inhalte und die Angabe der ID der Region als Wert bewirkt, dass diese Inhalte der entsprechenden Region "zugewiesen" werden. Somit erscheinen sie zur angegebenen Zeit im Bereich dieser Region. Im Beispiel platziert der Wertbottom
die Untertitel-Inhalte des entsprechenden<p>
-Elements in der Region mit der IDbottom
.
Dieses Beispiel wird wie unten gezeigt dargestellt. Probieren Sie es aus und spielen Sie mit dem Code in den beiden Feldern. Sie könnten beispielsweise das Attribut tts:origin
auf "0% 0%" setzen. Oder sehen Sie, was passiert, wenn Sie den Wert des Attributs region
des <p>
-Elements auf "top" ändern.
Erweitertes Beispiel
Das erweiterte Beispiel unten gibt Ihnen eine Vorstellung davon, was Sie mit IMSC tun können, nachdem Sie unsere Tutorials durchgearbeitet haben.
<?xml version="1.0" encoding="UTF-8"?>
<tt
xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling"
xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xml:lang="en" ttp:timeBase="media">
<head>
<styling>
<style xml:id="defaultStyle" tts:fontFamily="Verdana, Arial" tts:fontSize="100%"
tts:textAlign="center"/>
<style xml:id="alignStart" tts:textAlign="start"/>
<style xml:id="alignCenter" tts:textAlign="center"/>
<style xml:id="alignEnd" tts:textAlign="end"/>
<style xml:id="textWhite" tts:color="#FFFFFF"/>
<style xml:id="titleHeading" tts:fontSize="300%"/>
<style xml:id="spanDefaultStyle" tts:backgroundColor="#000000" tts:color="#FFFFFF"/>
<style xml:id="monoFont" tts:fontFamily="Lucida Console, Monaco, monospace"/>
<style xml:id="sansserifFont" tts:fontFamily="Impact, Charcoal, sans-serif"/>
<style xml:id="comicFont" tts:fontFamily="Comic Sans MS, cursive, sans-serif"/>
<style xml:id="blueText" tts:color="#00FFFF" tts:backgroundColor="#000000"/>
<style xml:id="limeText" tts:color="#00FF00" tts:backgroundColor="#000000"/>
<style xml:id="fuchsiaText" tts:color="#FF00FF" tts:backgroundColor="#000000"/>
<style xml:id="yellowText" tts:color="#FFFF00" tts:backgroundColor="#000000"/>
</styling>
<layout>
<region xml:id="rTop" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="before"/>
<region xml:id="rCenter" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="center"/>
<region xml:id="rBottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after"/>
</layout>
</head>
<body style="defaultStyle">
<div>
<p xml:id="p1" begin="00:00:01" end="00:00:03" region="rCenter" style="alignCenter">
<span style="titleHeading">IMSC Demo</span>
</p>
<p xml:id="p2" begin="00:00:03" end="00:00:05" region="rBottom" style="alignCenter">
<span style="spanDefaultStyle">You </span><span style="blueText">can</span><span
style="yellowText"> apply</span><span style="fuchsiaText"> different</span><span
style="limeText"> colors, </span>
</p>
<p xml:id="p3" begin="00:00:05" end="00:00:07" region="rBottom" style="alignCenter">
<span style="monoFont">use</span><span style="sansserifFont"> different</span><span
style="comicFont"> fonts,</span>
</p>
<p xml:id="p4" begin="00:00:07" end="00:00:09" region="rBottom" style="alignCenter">
<span>set </span><span tts:fontSize="150%">the</span><span tts:fontSize="200%"> font
size.</span>
</p>
<p xml:id="p5" begin="00:00:09" end="00:00:11" region="rBottom" style="alignStart">
<span style="spanDefaultStyle">Align at the start, </span><br/>
</p>
<p xml:id="p6" begin="00:00:11" end="00:00:13" region="rBottom" style="alignCenter">
<span style="spanDefaultStyle">center and</span>
</p>
<p xml:id="p7" begin="00:00:13" end="00:00:15" region="rBottom" style="alignEnd">
<span style="spanDefaultStyle">end</span><br/>
</p>
<p xml:id="p8" begin="00:00:15" end="00:00:17" region="rTop" style="alignCenter">
<span style="spanDefaultStyle">or vertically at the top, </span><br/>
</p>
<p xml:id="p9" begin="00:00:17" end="00:00:19" region="rCenter" style="alignCenter">
<span style="spanDefaultStyle">center and </span>
</p>
<p xml:id="p10" begin="00:00:19" end="00:00:21" region="rBottom" style="alignCenter">
<span style="spanDefaultStyle">bottom.</span>
</p>
</div>
</body>
</tt>
Zusammenfassung
Das war Ihr Schnellkurs in den IMSC-Codiergrundlagen! Wir haben hier nur an der Oberfläche gekratzt, und Sie können diese Themen in den nachfolgenden Artikeln viel tiefer bearbeiten.