Was ist HTML5-Video?
Die HTML5-Spezifikation eingeführt, um das Video-Element zum Zweck der das Abspielen von Videos, teilweise das Objektelement ersetzt wird.
HTML5-Video wird von seinen Schöpfern soll die neue Standard Art und Weise werden Video im Web zu zeigen, statt des bisherigen De-facto-Standard der proprietäre Adobe Flash-Plugin, obwohl frühe Annahme durch fehlende Einigung erschwert wurde, an die Videocodierungsformate und Audiocodierung Formate sollten in Web-Browsern unterstützt werden.
Wiedergabe von Videos in HTML
Vor HTML5, gab es keinen Standard für Videos auf einer Web-Seite zeigt.
Vor HTML5, Videos nur mit einem Plug-in gespielt werden können (like flash) .
Das HTML5 <video> -Element gibt einen Standard ein Video auf einer Webseite einbetten.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser - Version, die das voll unterstützt <video> Element.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Das HTML <video> Element
Um ein Video in HTML zu zeigen, verwenden Sie das <video> Element:
Beispiel
<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Versuch es selber " Wie es funktioniert
Die controls Attribut fügt Video - Steuerelemente, wie Wiedergabe, Pause und Lautstärke.
Es ist eine gute Idee, immer sind width und height Attribute.
Wenn Höhe und Breite nicht gesetzt sind, wird der Browser die Größe des Videos nicht kennen. Der Effekt ist , dass die Seite ändern (or flicker) , während der Video Lasten.
Text zwischen dem <video> und </video> Tags nur in Browsern angezeigt werden , die nicht die Unterstützung <video> Element.
Mehrere <source> Elemente können auf verschiedene Video - Dateien verbinden. Der Browser wird das erste anerkannte Format verwenden.
HTML <video> Automatische Wiedergabe
So starten Sie ein Video automatisch die Verwendung autoplay - Attribut:
Beispiel
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Versuch es selber " Das autoplay - Attribut funktioniert nicht in mobilen Geräten wie iPad und iPhone.
HTML Video - Browser-Unterstützung
Derzeit gibt es drei unterstützte Videoformate für das <video> Element: MP4, WebM und Ogg:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
HTML Video - Medientypen
| Datei Format | Medientyp |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video - Methoden, Eigenschaften und Ereignisse
HTML5 definiert DOM - Methoden, Eigenschaften und Ereignisse für das <video> Element.
Auf diese Weise können Sie laden, abspielen und Videos pausieren, sowie Dauer und Lautstärke einstellen.
Es gibt auch DOM-Ereignisse, die Sie benachrichtigt werden, wenn ein Video zu spielen beginnt, wird angehalten, usw.
Für eine vollständige DOM - Referenz, gehen Sie auf unsere HTML5 Audio / Video DOM Referenz .
HTML5-Video-Tags
| Etikett | Beschreibung |
|---|---|
| <video> | Definiert ein Video oder Film |
| <source> | Definiert mehrere Medienressourcen für die Medienelemente wie <video> und <audio> |
| <track> | Definiert Textspuren in Media-Player |