Das &video-Element wird verwendet, um Video-Inhalte in eine Webseite einzubetten. Es unterstützt eine Vielzahl von Attributen,
die es ermöglichen, die Wiedergabe von Videos zu steuern und zu konfigurieren.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
<!--Fallback-->
Dein Browser unterstützt das Video-Tag nicht.
Bitte aktualisiere deinen Browser oder lade das Video <a href="video.mp4">hier</a> herunter.
</video>
In diesem Beispiel haben wir drei verschiedene Videoformate (mp4, ogv und webm) angegeben,
um die Kompatibilität mit verschiedenen Browsern zu erhöhen. Falls der Browser keines dieser Formate unterstützt,
wird der Fallback-Text angezeigt, der den Benutzer darüber informiert und einen Link zum Herunterladen des Videos bereitstellt.
Fallback: Der Text und der Link innerhalb des video-Tags werden angezeigt, wenn der Browser das video-Element nicht unterstützt.
Bei meinen Tests hat das Format .mp4 auf allen Browsern funktioniert. Meine Browser sind:
Microsoft Edge, IE 11, Opera, Firefox, Google-Chrome, Safari und alle erkennen mp4-Dateien.
video-Element
Mit dem video-Tag definieren sie ein Video ohne Plugins und Add-Ons. Zwischen dem öffnenden und schließenden video-Tag schreiben sie den Fallback (Text oder
irgendeine Alternative). Das Attribut src enthält Videoname und Pfad.
<video src="Videos/Relativitaetstheorie.mp4"
width="100%" height="auto" controls>
<!---Fallback--->
<p>Ihr Browser kann dieses Video nicht wiedergeben.</p>
</video>;
Das Beispiel
Quelle: youtube
Folgende Attribute stehen zur Verfügung
src: Videoname und Pfad
height: Höhe in Pixel
width: Breite in Pixel
controls: Blendet Control-Panel ein
autoplay: Video beginnt sofort mit dem Abspielen
buffered: die Zeitdauer, die im Browser-Catch zwischengespeichert wurde
muted: Stummschaltung
loop: Endlosschleife
preload: Ladeoptionen (auto, metadata oder none)
poster: Zeigt ein Vorschaubid an (bei längeren Ladezeiten)
source-Element
Wenn sie mehrere Videoformate bereitstellen möchten, verwenden sie das source-Tag im video-Element. Die Attribute kennen wir schon aus dem picture-Element. In der Regel definiert
man die Quelle den Mime-Typ bzw ein Fallback.
<video width="100%" controls">
<source src="Videos/Relativitaetstheorie.mp4" type="video/mp4">
<source src="Videos/Relativitaetstheorie.ogv" type="video/ogg">
<source src="Videos/Relativitaetstheorie.webm" type="video/webm" />
<track src="subtitle_de.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
<track src="subtitle_en.vtt" kind="subtitles" srclang="en" label="Englisch">
<track src="specification.vtt" kind="descriptions">
<!--Fallback-->
<p>Ihr Browser kann dieses Video nicht wiedergeben.</p>
</video>
Folgende Attribute stehen zur Verfügung
src; Pfad und Dateiname
media: für media queries z.B. (min-width: 1024px)
type: MIME-Typ
track-Element
Für barrierefreies Web ist es wichtig, Videos mit Untertitel und Beschreibung zu verwenden.
Für kleine Videos können sie das auch selber machen. Mit dem track-Tag im video-Element können sie solche, externe Text-Dateien einfügen.
Verwenden sie dafür einen einfachen Texteditor und speichern sie die Datei mit der Endung .vtt. Schreiben sie darin den Untertitel wie folgt:
WEBVTT FILE
00:00:15.000 --> 00:00:30.000
Liebe Besucher meiner Webseiten
Das ist nur ein Test für Untertitel
00:00:31.000 --> 00:00:50.000
Einfach eine Textdatei mit der Endung .vtt
speichern und Untertitel schreiben!
Schreiben sie in der ersten Zeile WEBVTT gefolgt von einer Leerzeile.
Danach schreiben sie die Einblendzeit von -bis so wie im Script.
Danach der Text für den Untertitel.
Jetzt kommt wieder eine Leerzeile und wiederholen sie Einblendzeiten und Text sooft sie möchten.
In der Steuerungsleiste finden sie nun eine zusätzliche Schaltfläche mit der Beschriftung „CC“ für „closed captioning“.
Ähnlich funktioniert auch das Bereitstellen von Beschreibungstext für Screenreader. Während normale Browser nur die Untertitel anzeigen,
können Screenreader auch die Beschreibungen ausgeben.
Folgende Attribute stehen zur Verfügung
default: Standardwert
kind: Text-Typ
captions: Überschriften
chapters: Kapitel
descriptions: Video-Beschreibungen
metadata: Metadaten
subtitles: Untertitel
label: Sichtbare Auswahl
src: Dateiname und Pfad (.vtt-Format)
srclang: Sprache (z.B. de en)
Dieses Beispiel
Quelle: youtube
Audio
audio source
Um eine Audiodatei in HTML abzuspielen, verwenden Sie das audio-Element. Das control-Attribut fügt Audiosteuerelemente wie Wiedergabe, Pause und Lautstärke hinzu.
audio-Element
Das Verhalten vom audio-Element entspricht dem von Videos. Auch hier gibt es wieder drei unterstützte Audio-Formate (.mp3, .ogg, wav). Mit dem
source-Tag können sie den Browsern wieder unterschiedliche Audio-Formate anbieten.
Ein einfaches Beispiel
<audio src="Oesterreich.mp3" type="audio/mpeg" controls>
<!--Fallback-->
<p>Ihr Browser kann dieses Audio nicht wiedergeben.</p>
</audio>
Folgende Attribute stehen zur Verfügung
autoplay: Video beginnt sofort mit dem Abspielen
buffered: die Zeitdauer, die im Browser-Catch zwischengespeichert wurde
controls: Blendet Control-Panel ein
loop: Endlosschleife
muted: Stummschaltung
played: Zeigt an wie viel schon gespielt wurde
preload: Ladeoptionen (auto, metadata oder none)
src: Audioname und Pfad
volume: Lautstärke (von 0.0 stumm, bis 1.0 volle Lautstärke)
source-Element
Wenn sie mehrere Audio bereitstellen möchten, verwenden sie das source-Tag im audio-Element. In der Regel definiert
man die Quelle den Mime-Typ bzw ein Fallback.
<audio controls>
<source src="Oesterreich.ogg" type="audio/ogg">
<source src="Oesterreich.mp3" type="audio/mpeg">
<!--Fallback-->
<p>Ihr Browser kann dieses Audio nicht wiedergeben.</p>
</audio>
Folgende Attribute stehen zur Verfügung
src; Pfad und Dateiname
media: für media queries z.B. (min-width: 1024px)
type: MIME-Typ
Dieses Beispiel
HTML & Object
object param
Object wird verwendet um Dateien wie Audio, Video, Java-Applets, ActiveX und PDF in Ihre Web-Seiten einzubetten.
object-Element
Seit HTML5 hat das object-Tag einiges an Bedeutung verloren. Für Video- und Audio-Dateien gibt es eigene Elemente (video, audio), es sei denn,
sie möchten andere Formate einbetten.
ACHTUNG: object-Tags sind Inline-Elemente!
Folgende Attribute stehen zur Verfügung
Universalattribute
data; Pfad und Dateiname
type: MIME-Typ
width: Breite in Pixel
height: Höhe in Pixel
form: object kann einem Formular zugewiesen werden
name: Name
usemap: Verweissensitiv
Eine pdf-Datei einbetten
<object data="module/html/examples/dokument.pdf" type="application/pdf" width="400" height="200">
<!--Fallback-->
<p>Ihr Browser unterstützt das Einbetten von PDF-Dateien nicht. Bitte laden Sie das PDF herunter:
<a href="module/html/examples/dokument.pdf">PDF herunterladen</a>.</p>
</object>
Mit dem object-Element steht ihnen auch ein Fallback zur Verfügung.
param-Element
Mit dem param-Tag definieren sie Parameter für das object-Element. Parameter werden immer mit einem Namen- Wertpaar geschrieben (z.B <param name="bgcolor" value="#ff0000">).
Dieser Parameter erzeugt eine rote Hintegrundfarbe. Allerdings erkennt nicht jeder Browser alle Parametereinstellungen. Außerdem stehen für unterschiedliche Dateitypen
nicht immer dieselben Parameter zur Verfügung.
Eine mp4-Datei mit Object & Param
<object width="600" height="400" data="video.mp4" type="video/mp4">
<param name="src" value="video.mp4">
<param name="autoplay" value="false">
Ihr Browser unterstützt das Video-Tag nicht. Bitte laden Sie das Video herunter:
<a href="video.mp4">Video herunterladen</a>.
</object>
Im Beispiel werden zwei param-Elemente geschrieben. Einmal mit dem Namen src, welcher nochmal den Dateinamen angibt (für ältere IE).
Der Parameter autoplay steuert das automatische Abspielen des eingebetteten Objekts. Wenn autoplay auf "true" gesetzt ist,
beginnt das Video sofort mit der Wiedergabe, wenn die Seite geladen wird. Wenn autoplay auf "false" gesetzt ist,
wird das Video nicht automatisch gestartet und der Benutzer muss es manuell starten. Allerdings funktioniert das nicht auf jeden modernen Browser.
HTML & Embed
embed
Ähnlich dem object-Element arbeitet auch das embed-Tag. Embed gibt es schon seit ewigen Zeiten, jedoch erst seit HTML5 gehört es zum Standard.
Ältere Internet-Explorer werden das embed-Tag nicht kennen, darum sollten sie es mit Vorsicht verwenden, denn es steht ihnen kein Fallback und auch kein param-Element zur Verfügung.
embed-Element
Das embed-Tag gehört zu den Inline-Elementen und soll in älterem HTML innerhalb eines Blockelements geschrieben werden. Das embed-Element ist in HTML5 ein Standalone
und braucht kein abschließendes Element.
iframes (Inline-Fames) betten beliebige Inhalte wie Formulare, Bilder, Multimedia, externe Web-Seiten im HTML-Dokument ein.
Die meisten dieser Inhalte kann man auch mit dem object-Tag einbetten, speziell für externe HTML-Dokumente bietet uns das iframe-Element viele weitere Optionen.
iframe-Element
Mit dem Attribut src im öffnenden iframe-Tag schreiben sie die URL der Seite zum Einbetten in ihr HTML-Dokument. Zwischen öffnenden un schließendem iframe-Tag können sie auch noch ein
Fallback für Browser schreiben, die iframe nicht verstehen. Alle modernen Browser sollten laut Spezifikation iframe problemlos darstellen können.
Folgende Attribute stehen zur Verfügung
Universalattribute
src: Pfad und Dateiname bzw. URL
srcdoc: Inhaltsbeschreibung
width: Breite in Pixel
height: Höhe in Pixel
sandbox: Sandbox mit erhöhten Sicherheitsrestriktionen die Änderbar sind
(kein Wert): alle Einschränkungen sind aktiv
allow-forms: ermöglicht Formularabsendung
allow-pointer-lock: ermöglicht Zugriff auf Programmierschnittstellen
allow-popups: erlaubt Popups
allow-same-origin: erlaubt Inhalte die von fremden Webseiten stammen
allow-scripts: erlaubt Scripts
allow-top-navigation: ermöglicht Navigation
seamless: lässt den iframe als Teil der Seite erscheinen???
seamless soll das iframe als Teil des HTML-Dokuments erscheinen lassen. Bei meinen Tests hat das
bei keinem Browser funktioniert. Außerdem wird seamless von W3C und WHATWG als nicht Valide gemeldet! TIPP: Weg damit.
<iframe src="https://www.adiprinz.at" width="400" height="300">
<!--Fallback-->
<p>Ihr Browser kann leider keine iFrames anzeigen. Klicken sie hier:
<a href="http://www.adiprinz.at">EDV mit Adi Prinz</a></p>
</iframe>
In diesem Beispiel wird die Seite https://www.adiprinz.at in das iframe-Element geladen. Wenn der Browser das iframe-Element nicht unterstützt,
wird der Fallback-Inhalt angezeigt, der den Benutzer auffordert, die externe Seite in einem separaten Fenster zu öffnen.