Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)

HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)

In früheren HTML-Versionen war das Einbinden multimedialer Inhalte ein Graus. Mit einer Kombination aus object- und embed-Element wurde versucht, Videos und Sound auf die Webseite zu bringen. Ob sich das eingebundene Video dann tatsächlich abspielen ließ, war fraglich. Auch auf diesem Gebiet hat sich in HTML5 eine ganze Menge getan.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Damit wir alle kurz in Erinnerungen schwelgen können, hier ein Beispiel dafür, wie man Videos klassischerweise in eine Webseite einbindet:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Eine solche Syntax ist natürlich alles andere als schön.

Bilder



 
Aber selbst wenn man den ästhetischen Gesichtspunkt einmal außen vor lässt: Die Syntax ist in dieser Form schlichtweg zu fehleranfällig und zu komplex. In HTML5 lassen sich Videos viel einfacher einbinden. Verwendet wird dafür das video-Element.

Hier ein Beispiel dafür, wie sich eben jenes video-Element einbinden lässt:
<video src="video.ogv" width="300" height="200">
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>

Das ist in dieser Form die einfachste Variante. Drei Attribute sind bei dieser Syntaxform allerdings entscheidend. Über src wird das einzubindende Video angegeben. Achtet hier unbedingt auf die richtige Pfadangabe. Die beiden Attribute width und height bestimmen die Breite und Höhe des Videos. Wird keiner der beiden Werte angegeben, wird das Video in seiner Originalgröße angezeigt. Notiert man nur einen der beiden Werte, wird der andere Wert vom Browser automatisch berechnet. Das autoplay-Attribut weist den Browser an, das Video automatisch zu starten, sobald die Seite geladen wurde. Dieses Attribut sollte man normalerweise nicht setzen, da die automatische Wiedergabe von den Nutzern normalerweise nicht gewünscht wird. Das gilt umso mehr für Nutzer, die mobile Endgeräte mit geringer Bandbreite einsetzen.

Ein weiteres interessantes Attribut ist controls. Verwendet man dieses, werden vom Browser native Steuerungselemente für Wiedergabe und Lautstärke angezeigt.
<video src="video.ogv" width="300" height="200" controls>
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>

 
Hier das Ergebnis im Browser:

Bilder



 
Über die eingeblendete Leiste lässt sich das Video nicht nur anhalten und wieder starten, auch die Lautstärkereglung ist darin enthalten.

Bilder



 
Ihr könnt über das poster-Attribut ein Bild angeben, das bis zum Start des Videos angezeigt wird. Verwendet wird dafür das poster-Attribut.
<video src="video.ogv" width="300" height="200" poster="video.gif">
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>

Achtet auch hier wieder auf die richtige Pfadangabe, damit das Bild dann tatsächlich zu sehen ist.

Bilder



 
Vorsicht ist beim Einsatz des autoplay-Attributs geboten. Denn dieses Attribut legt fest, dass das Video automatisch abspielen soll, sobald es verfügbar ist.
<video src="video.ogv" width="300" height="200" autoplay>
   Ihr Browser ist leider nicht HTML5-kompatibel
</video>

Hinsichtlich des Traffics kann das preload-Attribut interessant sein. Denn dieses Attribut steuert das Vorladeverhalten. Dabei kann das Attribut die folgenden Werte annehmen:

auto – Der Browser kann die gesamte Datei vorladen.
none – Die Datei muss nicht vorgeladen werden.
metadata – Die Datei kann vorgeladen werden.

Fehlt das preload-Attribut, greifen die Voreinstellungen der Browser.


Videos und die Codecs

Wer sich mit dem Einbetten und der Wiedergabe von Videos in Webseiten beschäftigt, wird früher oder später auf die Problematik mit den verschiedenen Codecs stoßen. Dank dieser Codecs lassen sich Videos effizient komprimieren und dekomprimieren. Das Problem dabei: Die Browserhersteller konnten sich bis heute nicht auf ein gemeinsames Codec-Format einigen. Für HTML5 (und somit letztendlich auch für euch) bedeutet dies, dass es keine einheitlichen Codecs für Videos und Audiodateien gibt.

Für Videos haben sich mittlerweile die beiden Formate Ogg und MP4 etabliert. Daher ist man eigentlich immer auf der sicheren Seite, wenn man das Video in diesen beiden Format anbietet. Dazu weist man dem video-Element zwei source-Elemente zu.
<video width="400" height="300" controls="controls">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
 </video>

Ihr gebt hier also die Videoquelle nicht innerhalb des video-Elements an. Stattdessen werden dort nur allgemeine Angaben zur Darstellung gemacht. Welches Video angezeigt werden soll, bestimmt man über das source-Element. Dem src-Attribut weist man das entsprechende Video zu. Hinter type folgt die Angabe, um welche Art Video es sich handelt bzw. in welchem Format das Video vorliegt.

Sind mehrere source-Elemente angegeben, wird vom Browser immer das erste Video abgespielt, das "passt". Was es mit diesem "passt" auf sich hat, wird nachfolgend beschrieben.

Welcher Browser beherrscht nun aber eigentlich welches Format? Die Antwort auf diese Frage liefert die folgende Tabelle.
Browser Ogg Theora (.ogg) h.264 (.mp4)
Internet Explorer   Ab Version 9
Mozilla Firefox Ja  
Google Chrome Ja Ja
Opera Ja  
Safari   Ja
iPhone   Ja
Android   Ja

Die Tabelle macht das Dilemma deutlich: Die Interpretation der Formate verteilt sich fast gleichmäßig auf die einzelnen Browser. Daher ist man fast schon dazu gezwungen, Videos in beiden Formaten anzugeben.

Über das media-Attribut, das ausschließlich dem source-Element zugewiesen werden darf, kann man übrigens explizit angeben, für welchen Medientyp das Video geeignet ist. Um Videos speziell für bestimmte Endgeräte anzugeben, muss dem src das media-Attribut zugewiesen werden. Über dieses media-Attribut gibt man den gewünschten Medientyp an.

Eine mögliche Anwendung für das source-Element könnte folgendermaßen aussehen:
<video width="400" height="300">
    <!-- Nur für mobiele Endgeräte -->
    <source src="video_mobil.ogg" media="handheld" />
    <!—Alle anderen Geräte -->
    <source src="video_normal.ogg" media="all" />
 </video>

Hier wird anhand des media-Attributs überprüft, ob es sich um ein mobiles Endgerät handelt. In diesem Fall wird ein Video in kleinerer Größe abgespielt. Handelt es sich um ein anderes Endgerät, greift der all-Wert.



 

Videos sicher einbinden

HTML5 wird bekanntermaßen längst noch nicht von allen Browsern unterstützt. Das gilt natürlich auch für das video-Element. Eine Lösung bietet die Kombination verschiedener Einbindetechniken. Dabei werden die altbekannten object- und embed-Elemente mit video kombiniert. Das könnte folgendermaßen aussehen:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif">
 <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" />
 <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" />
 <param value="true" />
 <param value="false" />
 <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
 </embed>
 </object>
 </video>

Auf diese Weise eingebundene Videos werden in den meisten Browsern abspielbar sein. Browser, die das video-Element kennen, greifen darauf zu. Die anderen Browser nutzen hingegen die Angaben im object- oder eben im embed-Element.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:30

vielen Dank!

Portrait von Kiasa
  • 21.03.2015 - 11:30

Super! Vielen herzlichen Dank!

Portrait von fe_web
  • 04.02.2015 - 11:54

Gut gemacht und erklärt - Danke

Portrait von fe_web
  • 03.02.2015 - 11:37

Tolles Tutorial und sehr lehrreich.Danke

Portrait von rocking_sid
  • 11.01.2015 - 17:50

Vielen Dank für das sehr informative Tutorial!

Portrait von BOPsWelt
  • 11.01.2015 - 17:47

Vielen Dank für den ersten Teil zu den Multimedia Inhalten, sehr hilfreich.

Portrait von Kundentest
  • 11.01.2015 - 17:27

Herzlichen Dank für das Tutorial.

Portrait von MARIA52
  • 11.01.2015 - 17:23

Vielen Dank für das Tutorial.

Portrait von renate_C
  • 11.01.2015 - 17:02

Ich bedanke mich für das interessante und ausführliche Texttutorial.

Portrait von arko2013
  • 11.01.2015 - 17:01

Vielen Dank für die Informationen und sinnvollen Hinweise.

Portrait von Caesarion2004
  • 11.01.2015 - 17:00

Vielen Dank für den weiteren interessanten und verständlichen Teil.

Portrait von aloh47
  • 11.01.2015 - 15:20

Vielen Dank für das informative Tutorial

Portrait von MicroSmurf
  • 20.12.2014 - 20:13

Sehr interessant. Vielen Dank.

Portrait von Kundentest
  • 20.12.2014 - 12:36

Herzlichen Dank für das Video.

Portrait von Zicke
  • 20.12.2014 - 10:55

Genau was ich brauche. Super, vielen dank.

Portrait von Caesarion2004
  • 20.12.2014 - 10:19

Vielen Dank für einen weiteren Teil.

Portrait von owieortho
  • 20.12.2014 - 10:02

Hallo Daniel,

müsste man an der Stelle, an der Du die Einbindung für verschiedene Ausgabemedien vorführst, nicht auch zwei verschiedene Videodateien angeben? Also statt:

source src="video.ogg" type="video/ogg" media="handheld"
source src="video.ogg" type="video/ogg" media="all"

eher so:

source src="video1.ogg" type="video/ogg" media="handheld"
source src="video2.ogg" type="video/ogg" media="all"

O.

Portrait von pallasathena
Portrait von MARIA52
  • 20.12.2014 - 07:27

Vielen Dank für das informative Video.

x
×
×