Streaming-Dienste
Videos von Streaming-Diensten einbetten

HTMLBedeutung
<video>Lädt ein Video und bietet dafür weitere Funktionen. Es ist der Container für die mit SOURCE angegebenen Dateien. Mit CLASS und CSS kann VIDEO Element als Box gestaltet werden. Zusätzlich kann die Kontrollleiste (controls) eingeblendet werden. Die Optik dieser Kontrollleiste ist vom Browser abhängig. Sie kann mit CSS und Javascript angepasst werden.
<source>Quelle für Video-Dateien im <video>
<figure>Definiert als Container alle Elemente, z.B. erklärende Überschrift mit Text, für eine konkrete Abbildung.
<figcaption>Bildbeschreibung innerhalb von <figure>.

Attribute für das Video-Einbetten

AttributBedeutung
controlsSteuerfeld des Browsers. Die Optik der Kontrollleiste unterscheided sich je nach Browser.
autoplayStartet automatisch. Es ist ratsam zu prüfen ob ein Autoplay für die Besucher angenehm ist.
loopAutomatische Wiederholung,
alt=""Alternativ Text der den Inhalt beschreibt, z.B. für einen Blinden-Screenreader oder als Fallback-Text, wenn ein Medium nicht geladen werden kann.
class=""CSS-Klassen für die Gestaltung mit CSS Eigenschaften. Klassen können mehrfach im Dokument verwendet werden. Ein Element kann außerdem mehrere Klassen haben. Alle Eigenschaften der auf ein Element angewendeten Klassen werden addiert. Es gilt dann immer die letzte Eigenschaft, sollten sich Eigenschaften überschreiben. Ein modularer Aufbau der Klassen und konsequente sowie verständliche Namensgebung ist empfohlen.
id=""ID für die eindeutige Identifizierung des Element. Mit ID sollten Funktionen wie z.B. Verlinkung oder Skripte gesteuert werden. Für das Styling sind CSS-Klassen empfohlen.
width=""Breite des Elements. Man sollte über CSS, z.B. mit einer CLASS, das Element gestalten. Die Verwendung des Attributs width ist nicht zu empfehlen.
height=""Höhe des Elements. Man sollte über CSS, z.B. mit einer Class, das Element gestalten. Die Verwendung des Attributs height ist nicht zu empfehlen.

Video-Dateien
Video-Dateien einbetten

HTMLBedeutung
<video>Lädt ein Video und bietet dafür weitere Funktionen. Es ist der Container für die mit SOURCE angegebenen Dateien. Mit CLASS und CSS kann VIDEO Element als Box gestaltet werden. Zusätzlich kann die Kontrollleiste (controls) eingeblendet werden. Die Optik dieser Kontrollleiste ist vom Browser abhängig. Sie kann mit CSS und Javascript angepasst werden.
<source>Quelle für Video-Dateien im <video>
<figure>Definiert als Container alle Elemente, z.B. erklärende Überschrift mit Text, für eine konkrete Abbildung.
<figcaption>Bildbeschreibung innerhalb von <figure>.

Attribute für <video>

AttributBedeutung
controlsSteuerfeld des Browsers. Die Optik der Kontrollleiste unterscheided sich je nach Browser.
autoplayStartet automatisch. Es ist ratsam zu prüfen ob ein Autoplay für die Besucher angenehm ist.
loopAutomatische Wiederholung,
alt=""Alternativ Text der den Inhalt beschreibt, z.B. für einen Blinden-Screenreader oder als Fallback-Text, wenn ein Medium nicht geladen werden kann.
class=""CSS-Klassen für die Gestaltung mit CSS Eigenschaften. Klassen können mehrfach im Dokument verwendet werden. Ein Element kann außerdem mehrere Klassen haben. Alle Eigenschaften der auf ein Element angewendeten Klassen werden addiert. Es gilt dann immer die letzte Eigenschaft, sollten sich Eigenschaften überschreiben. Ein modularer Aufbau der Klassen und konsequente sowie verständliche Namensgebung ist empfohlen.
id=""ID für die eindeutige Identifizierung des Element. Mit ID sollten Funktionen wie z.B. Verlinkung oder Skripte gesteuert werden. Für das Styling sind CSS-Klassen empfohlen.
width=""Breite des Elements. Man sollte über CSS, z.B. mit einer CLASS, das Element gestalten. Die Verwendung des Attributs width ist nicht zu empfehlen.
height=""Höhe des Elements. Man sollte über CSS, z.B. mit einer Class, das Element gestalten. Die Verwendung des Attributs height ist nicht zu empfehlen.

Attribute für <source>

AttributBedeutung
src: "video.mp4" Verknüpft ein MP4 Video im Source Tag.
type="video/mp4"Definiert den Type der Source, z.B. MP4. Mp4 erhebt Lizenzgebühren für die Browserhersteller und wird deshalb mitunter nicht Supporten.
type="video/ogg"Definiert den Type der Source, z.B. OGG Vorbis für Firefox. OGG erhebt keine Lizenzgebühren.

Particles von Andrew Cramer. Frei verwendbar:
http://www.videocopilot.net/blog/2011/09/free-particle-stock-footage-tutorial/

► Weitere Infos

Externe Quellen

Kompatibilität

http://caniuse.com/#feat=video

Die Unterstützung für die Eigenschaften des <video> durch die heute gängigen Browser ist bei Beachtung der verwendeten Dateiformate Eigenschaften sehr gut.

<iframe> wird seit langer Zeit von den üblichen Browsern voll unterstützt.


W3C HTML5 Edition for Web Authors

4.8.6 The video element

Original Spezifikation der W3C für <video> in englischer Sprache.


<video> auf selfhtml.wiki

http://wiki.selfhtml.org(...)video

Umfangreiche Erklärung in deutscher Sprache.


Fullscreen-Background-Video

http://demosthenes.info(...)Fullscreen(...)Background-Video

Tutorial für vollflächige Hintergrund-Videos in englischer Sprache.