Themen:Multimedia

Aus SELFHTML

Mit HTML5 wurden die Elemente <audio> und <video> eingeführt. Diese ergänzen das bisherige <img>-Element, sodass nun neben Grafiken 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 es 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.

Inhaltsverzeichnis

Einbinden von Videos

Anklickbare Anzeigebeispiele funktionieren im Moment noch nicht, siehe die häufig gestellten Fragen zur Mitarbeit.

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, findet sich im nächsten Beispiel.

Mehrere Versionen eines Videos einbinden

Anklickbare Anzeigebeispiele funktionieren im Moment noch nicht, siehe die häufig gestellten Fragen zur Mitarbeit.

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

Anklickbare Anzeigebeispiele funktionieren im Moment noch nicht, siehe die häufig gestellten Fragen zur Mitarbeit.

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 einer Grafik, die angezeigt wird, falls die Videodatei nicht verfügbar ist oder bevor das Video geladen beziehungsweise abgespielt 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)
Von „http://wiki.selfhtml.org/wiki/Themen:Multimedia“