HTML-Video

Es gibt viele Möglichkeiten, Videos in HTML abzuspielen.

Beispiel

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Probieren Sie es selbst aus

Probleme, Probleme und Lösungen

Es ist nicht einfach, Videos in HTML abzuspielen!

Sie müssen viele Techniken beherrschen, um sicherzustellen, dass Ihre Videodatei auf allen Browsern (Internet Explorer, Chrome, Firefox, Safari, Opera) und auf allen Hardwaren (PC, Mac, iPad, iPhone) abgespielt werden kann.

In diesem Kapitel hat CodeW3C.com Probleme und Lösungen für Sie zusammengefasst.

Verwenden Sie den <embed>-Tag

Der <embed>-Tag dient dazu, Multimediaelemente in HTML-Seiten einzubetten.

Der folgende HTML-Code zeigt ein Flash-Video, das in eine Webseite eingebettet ist:

Beispiel

<embed src="movie.swf" height="200" width="200"/>

Probieren Sie es selbst aus

Problem

  • HTML4 kann den <embed>-Tag nicht erkennen. Ihre Seite kann nicht validiert werden.
  • Wenn der Browser Flash nicht unterstützt, kann das Video nicht abgespielt werden
  • iPad und iPhone können Flash-Videos nicht anzeigen.
  • Wenn Sie das Video in ein anderes Format konvertieren, kann es immer noch nicht in allen Browsern abgespielt werden.

Verwenden Sie den <object>-Tag

Der <object>-Tag dient dazu, Multimediaelemente in HTML-Seiten einzubetten.

Der folgende HTML-Code zeigt ein Flash-Video, das in eine Webseite eingebettet ist:

Beispiel

<object data="movie.swf" height="200" width="200"/>

Probieren Sie es selbst aus

Problem

  • Wenn der Browser Flash nicht unterstützt, kann das Video nicht abgespielt werden.
  • iPad und iPhone können Flash-Videos nicht anzeigen.
  • Wenn Sie das Video in ein anderes Format konvertieren, kann es immer noch nicht in allen Browsern abgespielt werden.

Verwenden Sie den <video>-Tag

Der <video>-Tag ist ein neuer Tag in HTML 5.

Die Funktion des <video>-Tags ist es, Videoelemente in HTML-Seiten einzubetten.

Der folgende HTML-Abschnitt zeigt ein Video im Format ogg, mp4 oder webm, das in die Webseite eingebettet wird:

Beispiel

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Ihr Browser unterstützt das Video-Tag nicht.
</video>

Probieren Sie es selbst aus

Problem

  • Sie müssen das Video in viele verschiedene Formate konvertieren.
  • Das <video>-Element funktioniert in alten Browsern nicht.
  • <video>-Element kann nicht durch HTML 4 und XHTML validiert werden.

Beste HTML-Lösung

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Probieren Sie es selbst aus

Im obigen Beispiel wurden 4 verschiedene Videoformate verwendet. Das HTML 5 <video>-Element versucht, das Video in einem der Formate mp4, ogg oder webm abzuspielen. Failschlägt dies, dann wird auf das <embed>-Element zurückgegriffen.

Problem

  • Sie müssen das Video in viele verschiedene Formate konvertieren.
  • <video>-Element kann nicht durch HTML 4 und XHTML validiert werden.
  • <embed>-Element kann nicht durch HTML 4 und XHTML validiert werden.

Anmerkung:Verwenden Sie <!DOCTYPE html> (HTML5), um Validierungsprobleme zu lösen.

Lösung von Youku

Die einfachste Methode, ein Video in HTML anzuzeigen, ist die Verwendung von Videoseiten wie Youku.

Wenn Sie möchten, dass das Video auf Ihrer Webseite abgespielt wird, können Sie das Video auf Videoseiten wie Youku hochladen und die HTML-Code auf Ihrer Webseite einfügen, um das Video abzuspielen:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"> 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Probieren Sie es selbst aus

Verwenden Sie Hyperlinks

Wenn eine Webseite Hyperlinks zu Mediendateien enthält, verwenden die meisten Browser ein "Zusatzprogramm", um Dateien abzuspielen.

Der folgende Codeabschnitt zeigt einen Link zu einer AVI-Datei. Wenn der Benutzer auf diesen Link klickt, startet der Browser ein "Zusatzprogramm", wie z.B. Windows Media Player, um diese AVI-Datei abzuspielen:

Beispiel

<a href="movie.swf">Play a video file</a>

Probieren Sie es selbst aus

Ein Kommentar zu Inline-Videos

Wenn ein Video in einer Webseite enthalten ist, wird es als Inline-Video bezeichnet.

Wenn Sie beabsichtigen, Inline-Videos in Web-Anwendungen zu verwenden, müssen Sie sich bewusst sein, dass viele Menschen Inline-Videos lästig finden.

Bitte beachten Sie auch, dass der Benutzer möglicherweise die Inline-Video-Optionen im Browser deaktiviert hat.

Unser bestes Rat ist, sie nur dort zu verwenden, wo der Benutzer ein Inline-Video sehen möchte. Ein positives Beispiel ist, wenn der Benutzer ein Video sehen und auf einen Link klicken muss, öffnet sich eine Seite und das Video wird abgespielt.

HTML 4.01 Multimedia-Tags

Tag Beschreibung
<applet> Nicht empfohlen.Definiert ein eingebettetes Applet.
<embed> Nicht empfohlen.Definiert ein eingebettetes Objekt (erlaubt in HTML5).
<object> Definiert ein eingebettetes Objekt.
<param> Definiert die Parameter des Objekts.

HTML 5 Multimedia-Tags

Tag Beschreibung
<video> Der Tag definiert Töne, wie z.B. Musik oder andere Audiostreams.
<embed> Der Tag definiert eingebettete Inhalte, wie z.B. Plugins.