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 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"/>
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-Abschnitt 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 möglicherweise 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, Video-Elemente in HTML-Seiten einzubetten.
Der folgende HTML-Code zeigt ein eingebettetes Video im Format ogg, mp4 oder webm an:
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. Wenn dies nicht funktioniert, 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, um ein Video in HTML anzuzeigen, ist die Verwendung von Video-Webseiten wie Youku.
Wenn Sie möchten, dass das Video auf Ihrer Webseite abgespielt wird, können Sie das Video auf Video-Webseiten wie Youku hochladen und die 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>
Verwenden Sie Hyperlinks
Wenn eine Webseite Hyperlinks zu Mediendateien enthält, verwenden die meisten Browser ein "Hilfsprogramm", um Dateien abzuspielen.
Der folgende Code-Abschnitt zeigt einen Link zu einer AVI-Datei. Wenn der Benutzer auf diesen Link klickt, startet der Browser ein "Hilfsprogramm", wie z.B. Windows Media Player, um diese AVI-Datei abzuspielen:
Beispiel
<a href="movie.swf">Play a video file</a>
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 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 das Inline-Video-Option 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 die Seite und das Video wird 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 Musik oder andere Audiostreams. |
<embed> | Der Tag definiert eingebettete Inhalte, wie Plugins. |
- Vorherige Seite HTML-Audio
- Nächste Seite HTML YouTube