HTML Video (Video)

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

HTML-Video-Wiedergabe (Videos)

Beispiel

<video width="320" height="240" 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 aus »

Probleme und Lösungen

Das Abspielen von Videos in HTML ist nicht einfach!

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

In diesem Kapitel fasst Example Tutorial die Probleme und Lösungen für Sie zusammen.

Verwendung des <embed>-Tags

Der Zweck des <embed>-Tags ist es, Multimedia-Elemente in eine HTML-Seite einzubetten.

Der folgende HTML-Code zeigt ein eingebettetes Flash-Video auf einer Webseite an:

Beispiel

<embed src="intro.swf.html" height="200" width="200">

Probieren Sie es aus »

Problem

  • HTML4 kann das <embed>-Tag nicht erkennen. Ihre Seite kann nicht validiert werden.
  • Wenn der Browser Flash nicht unterstützt, wird das Video nicht abgespielt.
  • iPad und iPhone können keine Flash-Videos anzeigen.
  • Wenn Sie das Video in andere Formate konvertieren, wird es trotzdem nicht in allen Browsern abgespielt.

Verwendung des <object>-Tags

Der Zweck des <object>-Tags ist es, Multimedia-Elemente in eine HTML-Seite einzubetten.

Das folgende HTML-Fragment zeigt ein auf einer Webseite eingebettetes Flash-Video an:

Beispiel

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

Problem:

Problem:

  • Wenn der Browser Flash nicht unterstützt, wird das Video nicht abgespielt.
  • iPad und iPhone können keine Flash-Videos anzeigen.
  • Wenn Sie das Video in andere Formate konvertieren, wird es trotzdem nicht in allen Browsern abgespielt.

Verwendung des HTML5 <video>-Elements

Der HTML5 <video>-Tag definiert ein Video oder einen Film.

Das <video>-Element wird in allen modernen Browsern unterstützt.

Das folgende HTML-Fragment zeigt ein auf einer Webseite eingebettetes Video im ogg-, mp4- oder webm-Format an:

Beispiel

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

Probieren Sie es aus »

Problem:

  • Sie müssen das Video in viele verschiedene Formate konvertieren.
  • Das <video>-Element ist in alten Browsern ungültig.

Die beste HTML-Lösung

Im folgenden Beispiel werden vier verschiedene Videoformate verwendet. Das HTML5-<video>-Element versucht, das Video im mp4-, ogg- oder webm-Format abzuspielen. Falls alle fehlschlagen, wird auf das <embed>-Element zurückgegriffen.

HTML 5 + <object> + <embed>

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

Problem:

Sie müssen das Video in viele verschiedene Formate konvertieren

  • Verwendung von Hyperlinks

Verwendung von Hyperlinks

Das folgende Code-Snippet zeigt einen Hyperlink zu einer AVI-Datei an. Wenn der Benutzer auf den Link klickt, startet der Browser die "Hilfsanwendung", wie z. B. Windows Media Player, um die AVI-Datei abzuspielen:

Beispiel

Beispiel

<a href="intro.swf.html">Eine Videodatei abspielen</a>

Erklärung zu Inline-Video

Erklärung zu Inline-Video

Wenn Sie planen, Inline-Video in einer Webanwendung zu verwenden, sollten Sie bedenken, dass viele Leute Inline-Video störend finden.

Gleichzeitig sollten Sie beachten, dass Benutzer die Inline-Video-Option in ihrem Browser möglicherweise bereits deaktiviert haben.

Unsere beste Empfehlung ist, Inline-Video nur dort einzubinden, wo Nutzer es sehen möchten. Ein positives Beispiel ist, ein Video einzubinden, das eine neue Seite öffnet und abspielt, wenn der Nutzer auf einen Link klickt.

Unsere beste Empfehlung ist, sie nur dort einzubinden, wo Nutzer Inline-Videos sehen möchten. Ein positives Beispiel ist, wenn Nutzern ein Video angezeigt wird und dann auf einen Link geklickt wird, wodurch eine Seite geöffnet und das Video abgespielt wird.

HTML-Multimedia-Tags

Neu: neue HTML5-Tags.

Tag Beschreibung
<embed> Definiert ein eingebettetes Objekt. In HTML4 nicht empfohlen, in HTML5 erlaubt.
<object> Definiert ein eingebettetes Objekt.
<param> Definiert Parameter für das Objekt.
<audio>Neu Definiert Toninhalt.
<video>Neu Definiert ein Video oder einen Film.
<source>Neu Definiert Multimedia-Ressourcen für das Medienelement (<video> und <audio>).
<track>Neu Definiert Untertiteldateien oder andere Textdateien für das Medienelement (<video> und <audio>).
Andere Erweiterungen