Benutzer:Novi/Spielwiese/VideoAudio

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Hinweis:

Mittlerweile gibt es die Seiten:

--Matthias Scharwies (Diskussion) 14:33, 4. Nov. 2014 (CET)

Mit HTML5 wurden die Elemente <audio> und <video> eingeführt. Diese ergänzen das bisherige <img>-Element, sodass nun neben Graphiken sowohl Audio- als auch Musikdateien eingebunden werden können. Im Gegensatz zu Bildern, kann das Verhalten dieser Elemente durch den Benutzer beieinflusst werden. So ist dem Benutzer zum Beispiel möglich Videos anzuhalten oder erneut abzuspielen. Damit dem Benutzer eine entsprechende Oberfläche durch den Browser zu Verfügung gestellt wird, muss das Attribut controls verwendet werden. Des Weiteren ist es möglich die Elemente über Javascript zu kontrollieren.

Einbinden von Videos

Beispiel
<html> <head> <title>Video Anzeigen</title> </head> <body> <video src="film.mp4"/> </body> </html>

Dieses Beispiel verdeutlicht die Verwendung des Video-Elements. Dabei wird das src-Attribut verwendet, um ein Video einzubinden. Dies hat jedoch den Nachteil, dass der Browser das Format des angegebenen Videos auch unterstützen muss. Eine andere Möglichkeit, die es Browsern ermöglicht zwischen verschiedenen Formaten eines Videos auszuwählen finden sich im nächsten Beispiel.

Mehrere Versionen eines Videos einbinden

Beispiel
<html> <head> <title>Video Anzeigen</title> </head> <body> <video controls> <source src="film.mp4" type="video/mp4" /> <!-- Für Safari und Chrome --> <source src="film.ogg" type="video/ogg" /> <!-- Für Firefox --> </video> </body> </html>

Hier wird ein zusätzliches Element mit dem Namen source verwendet, um verschiedene Versionen eines Videos einbinden zu können. Quelle: [1]

Vorschaubild anzeigen

Beispiel
<html> <head> <title>Video Anzeigen</title> </head> <body> <video controls poster="vorschaubild.png"> <source src="film.mp4" type="video/mp4" /> <!-- Für Safari und Chrome --> <source src="film.ogg" type="video/ogg" /> <!-- Für Firefox --> </video> </body> </html>

Das Attribut poster enthält den Pfad zu einem Graphik, die angezeigt wird falls die Videodatei nicht verfügbar ist oder bevor das Video geladen beziehungsweise bgespielt wird.


Noch nicht beschriebene Attribute

  1. preload
    • Möglich Werte sind:
      • none - sollte nicht im voraus geladen werden
      • auto - den Einstellungen entsprechend
      • metadata - die Infos wie Videodauer, erstes Frame etc. sollten geladen werden
  2. autoplay
  3. loop

Attribute für das <video></video> Element

  • autoplay: Das Video beginnt sofort mit dem Abspielen, wenn die Seite geladen ist
  • autobuffer: Das Video wird sofort geladen, wenn die Seite aufgebaut ist
  • width: Angabe der Breite des Players (wird sonst automatisch erkannt)
  • height: Angabe der Höhe des Players (wird sonst automatisch erkannt)
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Benutzer:Novi/Spielwiese/VideoAudio&oldid=83035“