html mit Adi Prinz

Das video-Element

Ein einfaches Video kann über das Attribut src eingebunden werden. Das boolesche Attribut controls zeigt die Bedienelemente des Browsers an.

<video
  src="videos/beispiel.mp4"
  controls>

  Ihr Browser kann dieses Video nicht wiedergeben.
</video>
    

Der Text zwischen dem öffnenden und dem schließenden video-Tag dient als Fallback für Browser, die das Element nicht unterstützen.

Für normale Webseiten sollte controls vorhanden sein, damit das Video gestartet, angehalten und in der Lautstärke verändert werden kann.

Die Größe des Videos festlegen

Die Attribute width und height geben die ursprünglichen Abmessungen des Videoplayers an.

<video
  src="videos/beispiel.mp4"
  width="1280"
  height="720"
  controls>

  Ihr Browser kann dieses Video nicht wiedergeben.
</video>
    

Für eine responsive Darstellung kann das Video zusätzlich mit CSS an die verfügbare Breite angepasst werden.

.responsive-video {
  display: block;
  width: 100%;
  height: auto;
}
    

<video
  class="responsive-video"
  src="videos/beispiel.mp4"
  width="1280"
  height="720"
  controls>

  Ihr Browser kann dieses Video nicht wiedergeben.
</video>
    

Die HTML-Attribute geben dem Browser das Seitenverhältnis vor. CSS verhindert, dass das Video breiter als sein verfügbarer Bereich dargestellt wird.

Mehrere Videoquellen anbieten

Statt das Attribut src direkt im video-Element zu verwenden, können innerhalb des Elements mehrere source-Elemente angegeben werden.

<video
  width="1280"
  height="720"
  controls>

  <source
    src="videos/beispiel.webm"
    type="video/webm">

  <source
    src="videos/beispiel.mp4"
    type="video/mp4">

  Ihr Browser kann dieses Video nicht wiedergeben.
  <a href="videos/beispiel.mp4">
    Video herunterladen
  </a>
</video>
    

Der Browser prüft die Quellen in der angegebenen Reihenfolge und verwendet die erste unterstützte Datei.

• src enthält Pfad und Dateinamen der Videodatei.
• type gibt den MIME-Typ der Datei an.
• video/mp4 bezeichnet eine MP4-Datei.
• video/webm bezeichnet eine WebM-Datei.

MP4 ist sehr weit verbreitet. Ob eine Videodatei abgespielt werden kann, hängt jedoch nicht nur vom Dateiformat, sondern auch vom darin verwendeten Codec ab.

Ein Vorschaubild anzeigen

Mit dem Attribut poster kann ein Bild angezeigt werden, bevor das Video gestartet wird.

<video
  src="videos/beispiel.mp4"
  poster="images/video-vorschau.jpg"
  width="1280"
  height="720"
  controls>

  Ihr Browser kann dieses Video nicht wiedergeben.
</video>
    

Der Wert des Attributs enthält den Pfad zur Bilddatei. Ohne poster zeigt der Browser häufig das erste verfügbare Einzelbild des Videos oder eine leere Fläche an.

Ein aussagekräftiges Vorschaubild hilft Benutzern dabei, Inhalt und Zweck des Videos bereits vor dem Start zu erkennen.

Das Laden des Videos steuern

Das Attribut preload gibt dem Browser einen Hinweis, welche Videodaten bereits beim Laden der Webseite vorbereitet werden sollen.

• preload="none" – das Video soll zunächst nicht geladen werden.
• preload="metadata" – nur Metadaten wie Dauer und Abmessungen sollen geladen werden.
• preload="auto" – der Browser darf die Videodatei bereits vorladen.

<video
  src="videos/beispiel.mp4"
  preload="metadata"
  controls>

  Ihr Browser kann dieses Video nicht wiedergeben.
</video>
    

preload ist nur ein Hinweis. Der Browser kann abhängig von Gerät, Verbindung und eigenen Einstellungen anders entscheiden.

Videos automatisch starten

Mit autoplay soll die Wiedergabe automatisch beginnen. Moderne Browser verhindern jedoch meistens automatisch gestartete Videos mit Ton.

<video
  src="videos/beispiel.mp4"
  autoplay
  muted
  playsinline
  loop>

  Ihr Browser kann dieses Video nicht wiedergeben.
</video>
    

• autoplay startet das Video automatisch.
• muted schaltet den Ton zunächst stumm.
• playsinline unterstützt die Wiedergabe innerhalb der Seite.
• loop startet das Video nach dem Ende erneut.

Automatisch gestartete Videos sollten nur eingesetzt werden, wenn sie den Benutzer nicht stören. Wichtige Videos benötigen weiterhin sichtbare Bedienelemente.

Untertitel mit track einbinden

Mit dem track-Element können Untertitel, Beschreibungen und Kapitel zu einem Video hinzugefügt werden. Die Texte werden üblicherweise in einer WebVTT-Datei mit der Endung .vtt gespeichert.

<video
  src="videos/beispiel.mp4"
  width="1280"
  height="720"
  controls>

  <track
    src="untertitel/beispiel-de.vtt"
    kind="subtitles"
    srclang="de"
    label="Deutsch"
    default>

  <track
    src="untertitel/beispiel-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English">

  Ihr Browser kann dieses Video nicht wiedergeben.
</video>
    

• src enthält Pfad und Dateinamen der WebVTT-Datei.
• kind bestimmt die Art der Textspur.
• srclang gibt die Sprache der Textspur an.
• label enthält die sichtbare Bezeichnung der Auswahl.
• default kennzeichnet die standardmäßig ausgewählte Spur.

Untertitel machen Videos auch für Menschen zugänglich, die den Ton nicht hören können oder das Video ohne Ton ansehen.

Eine WebVTT-Datei erstellen

Eine WebVTT-Datei beginnt mit der Angabe WEBVTT. Danach folgen einzelne Textblöcke mit Startzeit, Endzeit und Untertitel.

WEBVTT

00:00:02.000 --> 00:00:06.000
Willkommen bei EDV mit Adi Prinz.

00:00:07.000 --> 00:00:12.000
In diesem Video lernen Sie die Grundlagen von HTML kennen.
    

Zwischen den einzelnen Untertiteln steht jeweils eine Leerzeile. Die Zeitangaben bestimmen, wann ein Text eingeblendet und wieder ausgeblendet wird.

Die erste Zeile muss WEBVTT enthalten. Die Datei wird als reine Textdatei mit der Dateiendung .vtt gespeichert.

Arten von Textspuren

Das Attribut kind beschreibt den Verwendungszweck einer Textspur.

• subtitles – Untertitel oder Übersetzungen gesprochener Inhalte
• captions – Untertitel einschließlich wichtiger Geräusche und Sprecherangaben
• descriptions – Beschreibungen wichtiger visueller Inhalte
• chapters – Bezeichnungen für einzelne Kapitel des Videos
• metadata – maschinenlesbare Daten für Skripte

captions enthalten neben gesprochenem Text auch wichtige akustische Informationen wie Musik, Klingeln oder Applaus.

Videos barrierefrei bereitstellen

Ein zugängliches Video sollte nicht ausschließlich visuelle oder akustische Informationen vermitteln.

• Gesprochene Inhalte sollten als Untertitel verfügbar sein.
• Wichtige Geräusche sollten in den Untertiteln beschrieben werden.
• Visuelle Informationen benötigen gegebenenfalls eine Audiodeskription.
• Die Bedienelemente müssen mit der Tastatur erreichbar sein.
• Automatische Wiedergabe mit Ton sollte vermieden werden.
• Eine Textfassung kann als zusätzliche Alternative angeboten werden.

Untertitel helfen nicht nur gehörlosen und schwerhörigen Menschen. Sie sind beispielsweise auch in lauter Umgebung oder bei ausgeschaltetem Ton nützlich.

Wichtige Attribute des video-Elements

• src – Pfad zur Videodatei
• controls – zeigt die Bedienelemente an
• width – Breite des Videoplayers
• height – Höhe des Videoplayers
• poster – Bild vor dem Start des Videos
• preload – Hinweis zum Vorladen der Datei
• autoplay – startet die Wiedergabe automatisch
• muted – schaltet den Ton stumm
• loop – wiederholt das Video
• playsinline – spielt das Video innerhalb der Seite ab

Eigenschaften wie buffered, played und volume sind keine HTML-Attribute für den Quellcode. Sie gehören zur JavaScript-Schnittstelle des Videoelements.

Das audio-Element

Eine einzelne Audiodatei kann über das Attribut src eingebunden werden.

<audio
  src="audio/beispiel.mp3"
  controls>

  Ihr Browser kann diese Audiodatei nicht wiedergeben.
</audio>
    

Das boolesche Attribut controls zeigt die Bedienelemente des Browsers an. Der Text zwischen den Tags dient als Fallback für Browser, die das Element nicht unterstützen.

Ohne controls besitzt der Benutzer normalerweise keine sichtbare Möglichkeit, die Wiedergabe zu starten oder anzuhalten.

Mehrere Audioquellen anbieten

Innerhalb des audio-Elements können mehrere source-Elemente angegeben werden. Der Browser verwendet die erste unterstützte Datei.

<audio controls>
  <source
    src="audio/beispiel.ogg"
    type="audio/ogg">

  <source
    src="audio/beispiel.mp3"
    type="audio/mpeg">

  Ihr Browser kann diese Audiodatei nicht wiedergeben.

  <a href="audio/beispiel.mp3">
    Audiodatei herunterladen
  </a>
</audio>
    

• src enthält Pfad und Dateinamen der Audiodatei.
• type enthält den MIME-Typ der Datei.
• audio/mpeg wird für MP3-Dateien verwendet.
• audio/ogg wird für Ogg-Audiodateien verwendet.
• audio/wav wird für WAV-Dateien verwendet.

Das Dateiformat und der darin verwendete Codec bestimmen gemeinsam, ob eine Audiodatei vom Browser abgespielt werden kann.

Wichtige Audioformate

Für Audiodateien im Web werden unterschiedliche Formate eingesetzt. Sie unterscheiden sich unter anderem bei Dateigröße, Komprimierung und Browserunterstützung.

• MP3 – weit verbreitetes, verlustbehaftet komprimiertes Audioformat
• Ogg – Containerformat, häufig mit dem Audio-Codec Vorbis verwendet
• WAV – häufig unkomprimiert und deshalb meist deutlich größer
• AAC – komprimiertes Audioformat, häufig auch in MP4-Dateien verwendet
• Opus – moderner Codec, besonders geeignet für Sprache und Streaming

Für eine einfache Audioausgabe auf Webseiten ist MP3 wegen seiner weiten Verbreitung häufig ausreichend.

Das Laden einer Audiodatei steuern

Das Attribut preload gibt dem Browser einen Hinweis, welche Daten bereits beim Laden der Webseite vorbereitet werden sollen.

• preload="none" – die Audiodatei soll zunächst nicht geladen werden
• preload="metadata" – nur Metadaten wie die Dauer sollen geladen werden
• preload="auto" – der Browser darf die Audiodatei vorladen

<audio
  src="audio/beispiel.mp3"
  preload="metadata"
  controls>

  Ihr Browser kann diese Audiodatei nicht wiedergeben.
</audio>
    

Der Wert von preload ist lediglich eine Empfehlung. Der Browser entscheidet, welche Daten tatsächlich geladen werden.

Audio automatisch starten

Das Attribut autoplay fordert den Browser auf, die Wiedergabe automatisch zu beginnen. Moderne Browser verhindern jedoch meist automatisch gestartete Audioinhalte.

<audio
  src="audio/beispiel.mp3"
  autoplay
  muted
  controls>

  Ihr Browser kann diese Audiodatei nicht wiedergeben.
</audio>
    

Selbst mit autoplay ist nicht garantiert, dass die Wiedergabe beginnt. Häufig ist zunächst eine Aktion des Benutzers erforderlich.

Automatisch gestarteter Ton kann stark stören. Audiodateien sollten deshalb normalerweise vom Benutzer bewusst gestartet werden.

Eine Audiodatei wiederholen

Mit dem booleschen Attribut loop beginnt die Wiedergabe nach dem Ende automatisch erneut.

<audio
  src="audio/hintergrundmusik.mp3"
  controls
  loop>

  Ihr Browser kann diese Audiodatei nicht wiedergeben.
</audio>
    

Wiederholte Hintergrundmusik sollte nur sehr zurückhaltend eingesetzt werden. Benutzer müssen sie jederzeit anhalten oder stummschalten können.

Eine Audiodatei zum Download anbieten

Zusätzlich zum Audioplayer kann ein gewöhnlicher Link zur Datei angeboten werden. Das Attribut download weist den Browser an, die Datei herunterzuladen.

<audio
  src="audio/beispiel.mp3"
  controls>
</audio>

<p>
  <a
    href="audio/beispiel.mp3"
    download>
    Audiodatei herunterladen
  </a>
</p>
    

Ob der Download unmittelbar beginnt, hängt unter anderem von der Herkunft der Datei und den Einstellungen des Browsers ab.

Ein Transkript bereitstellen

Für gesprochene Inhalte sollte eine Textfassung angeboten werden. Sie hilft Menschen, die den Ton nicht hören können, und erleichtert außerdem das Nachlesen und Durchsuchen des Inhalts.

<audio
  src="audio/html-einfuehrung.mp3"
  controls>

  Ihr Browser kann diese Audiodatei nicht wiedergeben.
</audio>

<details>
  <summary>Transkript anzeigen</summary>

  <p>
    Willkommen zur Einführung in HTML. In dieser Aufnahme
    lernen Sie die grundlegende Struktur einer Webseite kennen.
  </p>
</details>
    

Ein Transkript sollte alle gesprochenen Inhalte und wichtige akustische Informationen verständlich wiedergeben.

Audiodateien barrierefrei bereitstellen

• Gesprochene Inhalte sollten zusätzlich als Text verfügbar sein.
• Wichtige Geräusche sollten im Transkript beschrieben werden.
• Die Bedienelemente müssen mit der Tastatur erreichbar sein.
• Automatische Wiedergabe sollte vermieden werden.
• Der Inhalt und die Dauer der Aufnahme sollten erkennbar sein.
• Ein direkter Download kann als zusätzliche Möglichkeit angeboten werden.

Ein Audioplayer allein ist keine ausreichende Alternative für Benutzer, die den Ton nicht wahrnehmen können.

Wichtige Attribute des audio-Elements

• src – Pfad zur Audiodatei
• controls – zeigt die Bedienelemente an
• preload – gibt einen Hinweis zum Vorladen
• autoplay – fordert den automatischen Start an
• muted – schaltet den Ton stumm
• loop – wiederholt die Audiodatei

Eigenschaften wie currentTime, duration, paused und volume gehören zur JavaScript-Schnittstelle und sind keine HTML-Attribute.