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>

Versuchen Sie es selbst

Probleme, Probleme und Lösungen

Es ist nicht einfach, Videos in HTML abzuspielen!

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

In diesem Kapitel hat CodeW3C.com für Sie Fragen und Lösungen 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"/>

Versuchen Sie es selbst

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 möglicherweise 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"/>

Versuchen Sie es selbst

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 möglicherweise nicht in allen Browsern abgespielt werden.

Verwenden Sie den <video>-Tag

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

Die <video>-Tag dient dazu, Videoelemente in HTML-Seiten einzufügen.

Der folgende HTML-Abschnitt zeigt ein eingefügtes Video im Format ogg, mp4 oder webm:

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>

Versuchen Sie es selbst

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.

Die 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>

Versuchen Sie es selbst

Im obigen Beispiel wurden 4 verschiedene Videoformate verwendet. Das HTML5 <video>-Element versucht, das Video in den Formaten mp4, ogg oder webm abzuspielen. Wenn dies fehlschlägt, 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.

Youku-Lösung

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

Wenn Sie möchten, dass ein Video auf Ihrer Webseite abgespielt wird, können Sie das Video auf eine Videoplattform wie Youku hochladen und dann den HTML-Code in Ihre 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>

Versuchen Sie es selbst

Verwenden Sie Hyperlinks

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

Der folgende Codeausschnitt 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 die AVI-Datei abzuspielen:

Beispiel

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

Versuchen Sie es selbst

Ein Kommentar über inline Videos

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

Wenn Sie beabsichtigen, inline Videos in Webanwendungen zu verwenden, müssen Sie sich bewusst sein, dass viele Menschen inline Videos als lästig empfinden.

Bitte beachten Sie auch, dass der Benutzer möglicherweise die Option für inline Videos im Browser deaktiviert hat.

Unser bestes Rat ist es, sie nur dort zu verwenden, wo der Benutzer inline Videos sehen möchte. Ein positives Beispiel ist, wenn der Benutzer ein Video sehen und auf einen Link klicken muss, wird die Seite geöffnet und das Video abgespielt.

HTML 4.01 Multimedia-Tags

Tag Beschreibung
<applet> Nicht empfohlen.Definiert eingebettete Applets.
<embed> Nicht empfohlen.Definiert eingebettete Objekte (erlaubt in HTML5).
<object> Definiert eingebettete Objekte.
<param> Definiert Parameter des Objekts.

HTML 5 Multimedia-Tags

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