HTML-Video
- Vorherige Seite HTML-Audio
- Nächste Seite HTML YouTube
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>
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"/>
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"/>
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>
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>
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>
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>
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. |
- Vorherige Seite HTML-Audio
- Nächste Seite HTML YouTube