HTML lernen leicht gemacht: Videos einfügen

In diesem Blogartikel erkläre ich, wie Sie Videos in HTML einfügen können.

Das Einfügen von Videos in HTML-Seiten ist wichtig, weil Videos Informationen auf anschauliche Weise vermitteln können. Sie machen Inhalte lebendiger und helfen dabei, komplexe Ideen einfacher zu erklären. Videos sprechen sowohl die Augen als auch die Ohren der Betrachter an, was sie besonders wirkungsvoll und ansprechend macht. Das ermöglicht es, Informationen auf eine vielseitige Art und Weise zu präsentieren, die für viele Menschen leichter verständlich ist.

Barrierefreiheit

Ein Video barrierefrei in eine HTML-Datei einzufügen ist keine einfache Aufgabe. Blinde Menschen können Videos gar nicht wahrnehmen. Damit blinde Menschen eine Grundinformation über den Inhalt des Videos bekommen, kann das Titel-Attribut oder besser das ARIA-Label-Attribut verwendet werden.

Videos mit Ton stellen für gehörlose Menschen eine große Barriere dar. Deswegen sollten Videos auf Webseiten Untertitel enthalten. Für Filme kann auch eine Audiodeskription erstellt werden. Hier wird ganz genau beschrieben, was im Video zu sehen ist. Allerdings ist das Erstellen einer Audiodeskription sehr zeitaufwendig. Deswegen gibt es in diesem Artikel zur Audiodeskription kein Beispiel.

Tastatur mit einer Taste auf der Barrierefrei steht — Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

Das <video>-Tag

Seit HTML5 gibt es ein Video-Tag zum Einbetten in HTML. Damit das erste Beispiel funktioniert, müssen Sie in der Entwicklungsumgebung Visual Studio Code das Plugin „Live Server“ installieren: Live Server .

Ich habe ein YouTube-Video von mir als MP4-Datei heruntergeladen. Dann habe ich den dazugehörigen Untertitel als .vtt-Datei heruntergeladen. HTML-Datei, MP4-Datei und Untertitel befinden sich im gleichen Verzeichnis.

<!DOCTYPE html>
    <html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Video einfügen in HTML</title>
    </head>
    <body>
        <h1>Video einfügen in HTML</h1>
        <video width="320" height="240" controls aria-label="Dieses Video zeigt, wie Sie mit HTML und CSS ein barrierefreies Formular erstellen können">
            <source src="Barrierefreies_Webdesign_barrierefreie_Formulare.mp4" type="video/mp4">
            <track src="untertitel_de.vtt" kind="subtitles" srclang="de" label="Deutsch">
            Ihr Browser unterstützt das Video-Tag nicht.
        </video>
    </body>
    </html>

Erklärung:

Hier ist die schrittweise Erklärung des obigen Codes:

Videotag:
- <video>: Das Tag <video> wird verwendet, um ein Video in die Webseite einzufügen.
- width=“320″ height=“240″: Diese Attribute setzen die Breite und Höhe des Videos auf 320 Pixel bzw. 240 Pixel.
- controls: Dieses Attribut fügt Steuerelemente wie Abspielen, Pause und Lautstärkeregelung hinzu, damit der Benutzer das Video steuern kann.
- aria-label: Das Attribut aria-label gibt eine Beschreibung des Videos für Screenreader an, damit blinde oder sehbehinderte Benutzer verstehen, worum es in dem Video geht.
Videodatei:
- <source src=“Barrierefreies_Webdesign_barrierefreie_Formulare.mp4″ type=“video/mp4″>
- <source>: Das Tag <source> gibt die Quelle des Videos an.
- src=“Barrierefreies_Webdesign_barrierefreie_Formulare.mp4″: Das Attribut src gibt den Pfad zur Videodatei an.
- type=“video/mp4″: Das Attribut type gibt das Format des Videos an, in diesem Fall „video/mp4“.
Untertitel:
- <track src=“untertitel_de.vtt“ kind=“subtitles“ srclang=“de“ label=“Deutsch“>

YouTube-Videos barrierefrei einfügen

YouTube-Videos sind eine großartige Möglichkeit, um Inhalte auf Ihrer Webseite zu präsentieren. Damit alle Besucher, einschließlich Menschen mit Behinderungen, Ihre Videos problemlos nutzen können, ist es wichtig, sie barrierefrei einzubinden. Hier sind einige Tipps und Anleitungen, wie Sie YouTube-Videos barrierefrei einfügen können.

Um ein YouTube-Video auf Ihrer Webseite einzubetten, verwenden Sie den <iframe>-Tag. Ein einfaches Beispiel sieht so aus:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Y9-ryrlpxf4?si=LpjbLrhwC5fMf2SO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Erklärung des Einbettung-Codes:

<iframe>: Ein Tag, das verwendet wird, um Inhalte von einer anderen Quelle auf einer Webseite einzubetten. In diesem Fall wird ein YouTube-Video eingebettet.
width=“560″ und height=“315″: Diese Attribute legen die Breite und Höhe des eingebetteten Videos in Pixel fest. Hier wird das Video 560 Pixel breit und 315 Pixel hoch angezeigt.
src=“https://www.youtube-nocookie.com/embed/Y9-ryrlpxf4?si=LpjbLrhwC5fMf2SO“:
- src steht für „source“ und gibt die URL des eingebetteten Inhalts an.
- https://www.youtube-nocookie.com/embed/ ist eine spezielle YouTube-Domain, die verwendet wird, um Videos ohne das Setzen von Cookies zu laden, was besser für den Datenschutz ist.
- Y9-ryrlpxf4 ist die eindeutige Video-ID auf YouTube.
- Der Parameter ?si=LpjbLrhwC5fMf2SO ist ein weiterer Parameter, der vom Video-Ersteller oder der Plattform hinzugefügt wird.
title=“YouTube video player“: Das title-Attribut gibt dem eingebetteten Inhalt einen Titel. Dieser Titel wird von Screenreadern verwendet, um den Inhalt für sehbehinderte Benutzer zu beschreiben.
frameborder=“0″0 bedeutet, dass kein Rahmen angezeigt wird.
allow=“accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share“:
- allow spezifiziert, welche Features im eingebetteten Inhalt erlaubt sind.
- accelerometer: Erlaubt die Nutzung des Beschleunigungssensors.
- autoplay: Erlaubt das automatische Abspielen des Videos.
- clipboard-write: Erlaubt das Schreiben in die Zwischenablage.
- encrypted-media: Erlaubt die Nutzung von verschlüsselten Medien.
- gyroscope: Erlaubt die Nutzung des Gyroskops.
- picture-in-picture: Erlaubt das Einfügen des Videos im Bild-im-Bild-Modus.
- web-share: Erlaubt das Teilen von Inhalten über das Web Share API.
referrerpolicy=“strict-origin-when-cross-origin“: Dieses Attribut legt fest, wie der Referer-Header bei Anfragen gehandhabt wird.
- strict-origin-when-cross-origin bedeutet, dass bei Cross-Origin-Anfragen (also Anfragen zu einer anderen Domain) nur die Herkunft (Origin) gesendet wird, und bei gleichen Ursprüngen wird der volle URL-Referer gesendet.
allowfullscreen: Dieses Attribut erlaubt es, das eingebettete Video im Vollbildmodus anzuzeigen.

Anmerkung zur Barrierefreiheit

Sie können auch das Title-Attribut durch das ARIA-Label-Attribut ersetzen. Dann sieht obiger Code so aus:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Y9-ryrlpxf4?si=LpjbLrhwC5fMf2SO" aria-label="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Untertitel bei YouTube-Videos

Wenn Sie auf YouTube ein Video hochladen, wird nach einer nicht festgelegten Zeit ein Untertitel automatisch erstellt. Leider ist dieser Text von der Rechtschreibung eine Katastrophe. Fleißige YouTuber verbessern den Untertitel von Hand. Was mitunter 30-60 Minuten dauern kann, je nachdem, wie lange das YouTube-Video geht.

Intelligente YouTuber nutzen zum Untertitel verbessern die Künstliche Intelligenz. Wie Sie YouTube-Untertitel mit KI verbessern können, erkläre ich in diesem Blogartikel: Barrierefreiheit: Untertitel für YouTube-Videos – Wie KI Rechtschreib- und Tippfehler verbessern kann. Das Verbessern der Untertitel mit Unterstützung der Künstlichen Intelligenz nutze ich inzwischen immer! Nach 60 Sekunden habe ich den perfekten Untertitel.

Best Practices zum Einfügen von Videos

Um sicherzustellen, dass Ihre Videos für alle Benutzer zugänglich sind, sollten Sie die folgenden Best Practices beachten:

Alternativtexte: Verwenden Sie das ARIA-Label-Attribut, um für blinde Menschen in Textform zu beschreiben, was im Video zu sehen ist.
Untertitel und Transkripte: Stellen Sie Untertitel für gehörlose oder schwerhörige Benutzer bereit. Transkripte sind auch nützlich, um den Inhalt des Videos in Textform zugänglich zu machen.
Beschreibungen: Fügen Sie Audiodeskriptionen hinzu, um visuelle Inhalte für blinde oder sehbehinderte Benutzer zu beschreiben.

Durch die Einhaltung dieser Richtlinien können Sie sicherstellen, dass Ihre Videos für alle Benutzer zugänglich sind und eine bessere Benutzererfahrung bieten.

Schlussbemerkung

Das Einfügen von Videos in HTML ist ein mächtiges Werkzeug, um Ihre Webseite lebendiger und informativer zu gestalten. Ob Sie Videos direkt in Ihre Seite einbetten oder YouTube-Videos einfügen, es ist wichtig, immer auf Barrierefreiheit zu achten. Verwenden Sie Alternativtexte, Untertitel und deskriptive Titel, um sicherzustellen, dass Ihre Inhalte für alle Nutzer zugänglich sind. Mit den richtigen Techniken und etwas Übung können Sie ansprechende, inklusive und benutzerfreundliche Webseiten erstellen, die Ihre Botschaft effektiv vermitteln. Viel Spaß beim Ausprobieren und Erstellen Ihrer eigenen Videos!

Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .

Weiterlesen

HTML lernen leicht gemacht: Ein inklusiver Kurs für alle

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS. Alle Beiträge von Markus Lemcke anzeigen