Das

Attribute des <video>-Tags

Das <video>-Tag verfügt über eine Reihe von Attributen, mit denen du das Aussehen, das Verhalten und die Zugänglichkeit von eingebetteten Videos steuern kannst.

Grundlegende Attribute

• src: Gibt die URL der Videodatei an.
• type: Bestimmt den MIME-Typ des Videos, z. B. video/mp4 oder video/webm.
• width und height: Legt die Breite und Höhe des Videorahmens in Pixeln fest.
• poster: Gibt das Bild an, das angezeigt wird, bevor das Video geladen wird.

Steuerelemente

• controls: Zeigt Standard-Steuerelemente wie Wiedergabe/Pause, Lautstärke und Vollbild an.
• autoplay: Startet das Video automatisch ab, wenn die Seite geladen wird.
• muted: Schaltet die Audioausgabe stumm.
• loop: Lässt das Video in einer Schleife abspielen.

Zugänglichkeit

• title: Bietet einen Titel für das Video, der von Hilfstechnologien vorgelesen werden kann.
• alt: Bietet Alternativtext für das Video, das angezeigt wird, wenn das Video nicht geladen werden kann oder die Medienwiedergabe deaktiviert ist.

Anpassen des Erscheinungsbilds

• object-fit: Passt das Video an den verfügbaren Bereich an und legt fest, wie es skaliert wird, z. B. contain oder cover.
• object-position: Positioniert das Video innerhalb des Rahmens, z. B. center oder left.

Weitere Attribute

• playsinline: Lässt das Video im Inline-Modus abspielen und verhindert, dass es ein modales Vollbild öffnet.
• crossorigin: Gibt an, ob das Video von einem anderen Ursprung geladen werden darf.
• preload: Bestimmt, wann das Video geladen wird, z. B. auto oder metadata.

Denke daran, dass die Verfügbarkeit und Kompatibilität von Attributen je nach Browser variieren kann. Konsultiere die Browserdokumentation für spezifische Details zu jedem Attribut.

Quellen für Videodateien

Im

Lokale Videodateien

Du kannst lokale Videodateien von deinem Computer oder Server einbetten, indem du den Pfad zur Datei im src-Attribut angibst:

<video src="video.mp4">
</video>

Remote-Videodateien

Du kannst auch Remote-Videodateien von externen Quellen wie YouTube oder Vimeo einbetten. Dazu verwendest du das src-Attribut zusammen mit der entsprechenden URL:

<video src="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
</video>

Videoformate

Die unterstützten Videoformate variieren je nach Browser und Gerät. Zu den gängigsten Formaten gehören:

• MP4 (H.264/AVC)
• WebM (VP8/VP9)
• Ogg (Theora/Vorbis)
• MOV (H.264/HEVC)

Mehrere Quellen angeben

Um die Kompatibilität zu gewährleisten, kannst du mehrere Quellen für dieselbe Videodatei angeben. Der Browser wählt automatisch diejenige Quelle aus, die am besten mit dem Gerät und Browser des Nutzers kompatibel ist:

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Fallbacks angeben

Du kannst auch eine Fallback-Quelle angeben, falls die primäre Quelle nicht verfügbar ist oder nicht abgespielt werden kann:

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
</video>

Dadurch wird sichergestellt, dass der Fallback-Inhalt angezeigt wird, falls die ersten beiden Quellen nicht geladen werden können.

Einbetten von Videos

So bettest du ein Video ein

Um ein Video einzubetten, verwendest du das <video>-Tag. Es verfügt über zwei erforderliche Attribute:

• src: Der Pfad zur Videodatei
• type: Der verwendete Videotyp (z. B. video/mp4)

<video src="video.mp4" type="video/mp4"></video>

Alternative Videoformate

Um die Kompatibilität mit verschiedenen Browsern und Geräten zu gewährleisten, kannst du mehrere Videoquellen mit unterschiedlichen Formaten angeben. Das <source>-Tag wird innerhalb des <video>-Tags verwendet, um alternative Quellen bereitzustellen:

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Größenanpassung des Videos

Du kannst die Größe des eingebetteten Videos über CSS steuern. Verwende die Eigenschaften width und height im Stilattribut des <video>-Tags:

<video style="width: 500px; height: 300px;">
  ...
</video>

Autoplay und Loop

Das Attribut autoplay startet die Videowiedergabe automatisch beim Laden der Seite. Das Attribut loop wiederholt die Videowiedergabe, sobald sie abgeschlossen ist:

<video src="video.mp4" type="video/mp4" autoplay loop></video>

Der Poster-Rahmen

Das Attribut poster stellt ein Standbild dar, das angezeigt wird, bevor das Video abgespielt wird. Es hilft dir, eine Vorschau des Videoinhalts zu geben:

<video src="video.mp4" type="video/mp4" poster="poster.jpg"></video>

Steuerung von Wiedergabe und Lautstärke

Abspielen und Pausieren

Mit den Attributen autoplay und controls kannst du festlegen, ob das Video automatisch abgespielt werden soll und ob eine Wiedergabesteuerung angezeigt werden soll.

Das autoplay-Attribut weist deinen Browser an, das Video abzuspielen, sobald die Seite geladen ist. Das controls-Attribut fügt eine Symbolleiste hinzu, mit der du die Wiedergabe steuern kannst.

<video src="video.mp4" autoplay controls></video>

Lautstärkeregelung

Du kannst die Lautstärke des Videos mit dem Attribut volume steuern. Der Wert reicht von 0 (stumm) bis 1 (volle Lautstärke).

<video src="video.mp4" volume="0.5"></video>

Zeitleiste

Die Zeitleiste am unteren Rand des Videos ermöglicht es dir, zu einem bestimmten Punkt im Video zu springen. Du kannst auf die Zeitleiste klicken oder sie ziehen, um die Abspielposition zu ändern.

Andere Steuerelemente

Abhängig von deinem Browser und dem verwendeten Videocodec stehen möglicherweise weitere Steuerelemente zur Verfügung, wie z. B.:

• Vollbild-Schaltfläche: Erweitert das Video auf die gesamte Bildschirmgröße.
• Stummschalttaste: Schaltet den Ton des Videos aus.
• Untertitelschalter: Zeigt Untertitel an, falls verfügbar.
• Geschwindigkeitsregler: Ändert die Wiedergabegeschwindigkeit des Videos.

JavaScript-Steuerung

Du kannst auch JavaScript verwenden, um die Wiedergabe und Lautstärke des Videos programmatisch zu steuern. Beispielsweise kannst du die folgenden Methoden verwenden:

• play(): Spielt das Video ab.
• pause(): Pausiert das Video.
• setVolume(value): Legt die Lautstärke des Videos fest.
• currentTime: Gibt die aktuelle Abspielposition des Videos zurück.
• duration: Gibt die Gesamtdauer des Videos zurück.

Hinzufügen von Untertiteln

Untertitel, auch als Closed Captions bezeichnet, machen deine Videos für ein breiteres Publikum zugänglich. Dazu gehören Personen mit Hörbehinderungen, die nicht hören können, und Personen, die in Umgebungen sind, in denen sie die Audiospur nicht hören können. Du kannst Untertitel zu deinen Videos hinzufügen, indem du eine Textdatei mit der Erweiterung ".vtt" erstellst.

Erstellen einer Untertitel-Textdatei

Eine Untertitel-Textdatei besteht aus mehreren Abschnitten, die jeweils einen Untertitel darstellen. Jeder Untertitel besteht aus folgenden Informationen:

• Zeitmarke: Die Start- und Endzeit des Untertitels, im Format hh:mm:ss.ms.
• Text: Der Text des Untertitels.

Ein Beispiel für einen Untertitelabschnitt:

00:00:00.000 --> 00:00:05.000
Willkommen bei diesem Tutorial.

Einbetten von Untertiteln in dein Video

Sobald du eine Untertitel-Textdatei erstellt hast, musst du sie in dein Video einbetten. Dies kannst du über das track-Element tun:

<video>
  <source src="video.mp4" type="video/mp4">
  <track src="untertitel.vtt" kind="subtitles" srclang="en" label="Englisch">
</video>

Im obigen Beispiel wird die Untertitel-Textdatei "untertitel.vtt" dem Video hinzugefügt. Sie hat die Sprache "en" und die Bezeichnung "Englisch".

Konfigurieren der Untertitel-Anzeige

Du kannst das Aussehen und das Verhalten der Untertitel mit folgenden Attributen des track-Elements anpassen:

• mode: Legt fest, ob die Untertitel standardmäßig ein- oder ausgeschaltet sind. Die Optionen sind "auto", "hidden" und "showing".
• default: Gibt an, ob die Untertitel standardmäßig aktiviert sind.
• label: Der Text, der zur Identifizierung der Untertitel in den Steuerungen angezeigt wird.

Tipps für die Erstellung von Untertiteln

Hier sind einige Tipps für die Erstellung effektiver Untertitel:

• Halte sie kurz und prägnant.
• Verwende eine leicht lesbare Schriftart.
• Stelle einen ausreichenden Kontrast zum Hintergrund bereit.
• Vermeide es, die Untertitel mit anderen Videoelementen zu überlappen.
• Überprüfe deine Untertitel sorgfältig auf Rechtschreib- und Grammatikfehler.

Anpassen des Erscheinungsbilds

Durch Anpassen des Erscheinungsbilds deines eingebetteten Videos kannst du es in die Ästhetik deiner Website integrieren. Hier sind einige Möglichkeiten, wie du das Aussehen deines Videos anpassen kannst:

Größe und Positionierung

Um die Größe und Position des Videos zu ändern, verwendest du die Attribute width und height. Du kannst auch die CSS-Eigenschaften margin und padding verwenden, um Leerraum um das Video herum hinzuzufügen.

Rand und Rahmen

Du kannst dem Video mithilfe der CSS-Eigenschaften border und border-radius einen Rand oder einen abgerundeten Rahmen hinzufügen. Dadurch erhält das Video ein raffinierteres Aussehen.

Steuerelemente ausblenden

Standardmäßig werden die Steuerelemente für die Videowiedergabe (z. B. Abspielen, Pause, Lautstärke) unten auf dem Video angezeigt. Um diese auszublenden, verwendest du die CSS-Eigenschaft display: none;.

Hintergrundfarbe

Du kannst die Hintergrundfarbe des Videos mit der CSS-Eigenschaft background-color anpassen. Dies ist nützlich, wenn das Video keinen Hintergrund hat oder wenn du eine bestimmte Farbe ergänzen möchtest.

Eigene Steuerelemente verwenden

Wenn du die Standard-Videosteuerelemente nicht verwenden möchtest, kannst du eigene Steuerelemente mit HTML und CSS erstellen. Hierbei hast du die vollständige Kontrolle über das Aussehen und die Funktionalität der Steuerelemente.

Plugins verwenden

Es gibt viele Plugins, mit denen du das Erscheinungsbild deiner Videos anpassen kannst. Zum Beispiel bietet das VideoJS-Plugin eine breite Palette an Anpassungsoptionen, darunter Skins, Wiedergabelisten und Live-Streaming.

Fehlerbehebung bei Videoproblemen

Wenn du Probleme beim Abspielen von Videos in deinem HTML-Dokument hast, gibt es einige mögliche Ursachen und Lösungen:

Video wird nicht abgespielt

• Überprüfe die Pfadangabe zur Videodatei: Stelle sicher, dass der Pfad zur Videodatei korrekt ist und dass die Datei am angegebenen Speicherort vorhanden ist.
• Überprüfe den Dateityp: Das video-Tag unterstützt nur bestimmte Videoformate. Überprüfe, ob die von dir verwendete Videodatei in einem unterstützten Format vorliegt (z. B. MP4, WebM, Ogg).
• Verwende mehrere Quellen: Wenn ein bestimmtes Format nicht unterstützt wird, kannst du versuchen, mehrere Quellen mit unterschiedlichen Formaten anzugeben.
• Überprüfe die Codierung: Die Videodatei muss korrekt codiert sein, um in Webbrowsern abgespielt werden zu können. Verwende ein Video-Codierungswerkzeug, um die Datei bei Bedarf neu zu codieren.

Video hat keinen Ton

• Überprüfe die Lautstärkeeinstellung: Stelle sicher, dass die Lautstärke nicht stummgeschaltet ist. Überprüfe auch, ob die Lautstärke deines Computers eingeschaltet ist.
• Überprüfe den Audiocodec: Das video-Tag unterstützt nicht alle Audiocodecs. Überprüfe, ob der Audiocodec deiner Videodatei in den unterstützten Codecs enthalten ist (z. B. AAC, MP3).
• Überprüfe die Browsereinstellungen: Manche Browser blockieren möglicherweise das Abspielen von Audio in eingebetteten Videos. Überprüfe die Einstellungen deines Browsers und stelle sicher, dass das Abspielen von Audio zugelassen ist.

Video wird verzerrt oder abgehackt abgespielt

• Überprüfe die Internetverbindung: Eine langsame oder instabile Internetverbindung kann zu einer verzerrten oder abgehackten Wiedergabe führen.
• Reduziere die Videoauflösung: Eine hohe Videoauflösung kann eine Belastung für deinen Computer darstellen. Versuche, die Auflösung zu reduzieren, um eine reibungslose Wiedergabe zu gewährleisten.
• Deaktiviere Hardwarebeschleunigung: Die Hardwarebeschleunigung kann in manchen Fällen zu Problemen führen. Versuche, sie in den Einstellungen deines Browsers zu deaktivieren.
• Verwende einen anderen Browser: Manche Browser sind möglicherweise besser für die Wiedergabe von Videos optimiert als andere. Versuche, einen anderen Browser zu verwenden, um festzustellen, ob das Problem dadurch behoben wird.

Erweitertes Styling für Videos

Neben den Grundattributen für die Steuerung von Videodateien bietet HTML auch erweiterte Styling-Optionen, mit denen du das Erscheinungsbild deiner eingebetteten Videos anpassen kannst. Hier sind einige Möglichkeiten, wie du dein Video stylen kannst:

CSS-Eigenschaften

Du kannst CSS-Eigenschaften wie width, height, margin, padding und background-color verwenden, um Größe, Positionierung und Hintergrundfarbe deines Videos zu steuern. Beispielsweise kannst du die folgende CSS-Klasse erstellen:

.video-container {
  width: 640px;
  height: 360px;
  margin: 0 auto;
  padding: 10px;
  background-color: #000;
}

und sie dann auf dein Video anwenden:

<video class="video-container">
  ...
</video>

Objektanpassung

Mit dem Attribut object-fit kannst du steuern, wie das Video in seinem Container skaliert wird. Die folgenden Werte sind verfügbar:

• contain: Skaliert das Video so, dass es innerhalb des Containers passt, während das Seitenverhältnis erhalten bleibt.
• cover: Skaliert das Video so, dass es den Container vollständig ausfüllt, wobei Teile des Videos möglicherweise abgeschnitten werden.
• fill: Skaliert das Video so, dass es den Container vollständig ausfüllt und dabei das Seitenverhältnis ignoriert.

Beispielsweise könntest du folgende Einstellung verwenden, um das Video an die Größe des Containers anzupassen, während du das Seitenverhältnis beibehältst:

<video object-fit="contain">
  ...
</video>

Rand- und Schatteneffekte

Du kannst CSS-Eigenschaften wie border, border-radius und box-shadow verwenden, um deinem Video Ränder, abgerundete Ecken und Schatten hinzuzufügen. Beispielsweise könntest du folgende CSS-Klasse erstellen:

.video-style {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

und sie dann auf dein Video anwenden:

<video class="video-style">
  ...
</video>

Benutzerdefinierte Steuerlemente

HTML5 bietet ein standardmäßiges Satz von Videosteuerelementen, aber du kannst auch deine eigenen benutzerdefinierten Steuerelemente mithilfe von HTML, CSS und JavaScript erstellen. Dies ermöglicht dir mehr Kontrolle über das Erscheinungsbild und die Funktionalität deiner Videoplayer.

Video-Poster

Mit dem Attribut poster kannst du ein Standbild angeben, das angezeigt wird, bevor das Video geladen oder abgespielt wird. Dies kann verwendet werden, um die Ladezeit anzuzeigen oder eine Vorschau des Videos zu bieten. Beispielsweise könntest du folgende Einstellung verwenden, um ein Posterbild für dein Video festzulegen:

<video poster="poster.jpg">
  ...
</video>

Web-APIs

Web-APIs wie die Media Source Extensions API können verwendet werden, um erweiterte Funktionen wie dynamisches Laden von Videodateien, Anpassen der Wiedergabegeschwindigkeit und Erstellen von interaktiven Videoplayer zu implementieren.

Zugänglichkeit von Videos

Videos sind ein wesentlicher Bestandteil des modernen Webs und sollten für alle Nutzer zugänglich sein, einschließlich derer mit Behinderungen. Hier sind einige wichtige Aspekte der Barrierefreiheit von Videos:

Beschriftungen

• Alternativer Text (Alt-Text): Füge einen präzisen Alt-Text hinzu, der den Inhalt des Videos für Nutzer beschreibt, die es nicht sehen können.
• Untertitel: Biete Untertitel für Nutzer mit Hörbehinderungen oder die die Audiospur nicht hören können.
• Audiodeskription: Füge eine Audiodeskription für Nutzer mit Sehbehinderungen hinzu, die die visuellen Elemente des Videos beschreibt.

Tastaturnavigation

• Stelle sicher, dass Nutzer das Video mit der Tastatur steuern können, z. B. durch Drücken der Leertaste zum Abspielen/Anhalten und der Pfeiltasten zum Vor- und Zurückspulen.
• Verwende ARIA-Attribute, um die Tastaturnavigation zu verbessern, z. B. role="button" für Schaltflächen zum Abspielen/Anhalten.

Farbkontrast

• Stelle einen ausreichenden Farbkontrast zwischen dem Video und dem Hintergrund sicher, um die Sichtbarkeit für Nutzer mit Sehbehinderungen zu verbessern.
• Verwende Tools wie den WAVE Accessibility Evaluator oder den Contrast Checker von WebAIM, um den Farbkontrast zu prüfen.

Weitere Überlegungen

• Sprachsteuerung: Ermögliche es Nutzern, das Video mit Sprachbefehlen zu steuern, z. B. mit Siri oder Google Assistant.
• Textalternativen: Biete Textalternativen zu wichtigen Informationen im Video, z. B. in einem Transkript oder einer Zusammenfassung.
• Zugänglichkeit von Untertiteln: Stelle sicher, dass Untertitel in einer geeigneten Schriftgröße und -farbe angezeigt werden und mit Bildschirmlesegeräten kompatibel sind.

Indem du diese Richtlinien befolgst, kannst du sicherstellen, dass deine Videos für alle Nutzer zugänglich sind und ein inklusives Benutzererlebnis bieten. Weitere Informationen zur Barrierefreiheit von Videos findest du auf den folgenden Ressourcen:

• Web Accessibility Initiative (WAI) – Video Accessibility
• YouTube Accessibility Guidelines
• WebAIM Video Accessibility Resources

Best Practices für die Verwendung des

Bereitstellung von alternativen Quellen

Sorge für eine zuverlässige Videozustellung, indem du mehrere Quellen für dieselbe Videodatei bereitstellst. Dies ermöglicht es Benutzern, das Video weiterhin anzusehen, falls eine Quelle nicht geladen wird.

Verwendung adaptiver Bitraten-Streaming (ABR)

Verbessere die Videoqualität und das Ladeverhalten, indem du adaptive Bitraten-Streaming implementierst. ABR passt die Videobitrate an die Netzwerkbandbreite des Benutzers an, wodurch ein reibungsloses Wiedergabeerlebnis sichergestellt wird.

Testen auf verschiedenen Geräten und Browsern

Stelle sicher, dass deine Videos auf verschiedenen Geräten und Browsern korrekt wiedergegeben werden. Teste deine Videos auf Desktops, Laptops, Mobiltelefonen und Tablets sowie in verschiedenen Browsern wie Chrome, Firefox und Safari.

Optimierung für barrierefreien Zugang

Mache deine Videos für alle zugänglich, indem du Untertitel und Beschreibungen für Gehörlose und Sehbehinderte bereitstellst. Erwäge auch die Verwendung von Transkripten, um den Videoinhalt für Screenreader zugänglich zu machen.

Beachtung von Urheberrechtsbestimmungen

Stelle sicher, dass du die Urheberrechtsbestimmungen für die verwendeten Videodateien einhältst. Verwende nur lizenzfreie Videos oder hole dir die Genehmigung der Urheberrechtsinhaber.

Unterstützung verschiedener Codecs

Unterstütze eine Vielzahl von Videocodecs, um die Kompatibilität mit verschiedenen Geräten und Browsern zu gewährleisten. Zu den gängigen Codecs gehören H.264, H.265 und VP9.

Verwendung des HTML5-Mediaelement-APIs

Verwende das HTML5-Mediaelement-API, um erweiterte Funktionen wie Wiedergabesteuerung, Lautstärkeregelung und Untertitel hinzuzufügen. Dies ermöglicht dir eine bessere Integration von Videos in deine Website.

Berücksichtigung der Datennutzung

Denke an die Datennutzung deiner Benutzer, insbesondere bei Mobilgeräten. Biete verschiedene Videoqualitäten an, damit Benutzer die Qualität an ihre Netzwerkeinschränkungen anpassen können.

Verwendung von Caching-Mechanismen

Verbessere die Ladezeiten deiner Videos, indem du Caching-Mechanismen wie Browser-Caching und Server-seitiges Caching implementierst. Dies speichert häufig verwendete Videodateien lokal, wodurch wiederholte Downloads vermieden werden.

Monitoring und Analyse

Überwache die Leistung deiner Videos, um Einblicke in die Benutzerinteraktion, die Ladezeiten und die Videofehler zu erhalten. Nutze diese Informationen, um deine Videos zu optimieren und die Benutzererfahrung zu verbessern.