HTML5 Grundlehrbuch

HTML5 API

HTML5 Medien

HTML5 Grafik

HTML5 Audio (Audio)HTML5 Geolokalisierung

HTML5 Video(Video)

HTML <video> ist für HTML 5+, um Online-Video-Streamings zu definieren.

HTML5 Video(Video)

Viele Websites verwenden Videos. HTML5 bietet Standards zur Anzeige von Videos.

Überprüfen Sie, ob Ihr Browser HTML unterstützt5 Video:

Videos auf Webseiten

Bis heute gibt es keine Standards für die Anzeige von Videos auf Webseiten.

Heute werden die meisten Videos durch Plugins (wie Flash) angezeigt. Allerdings besitzen nicht alle Browser die gleichen Plugins.

HTML5 Definiert eine Standardmethode, um Videos über das video-Element zu enthalten.

Browsersupport

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das <video>-Element.

Beachten Sie: Internet Explorer 8 Oder frühere IE-Versionen unterstützen das <video>-Element nicht.

HTML5 (Video)- Wie es funktioniert

Um in HTML5 zeigt, was Sie alles benötigen:

Online-Beispiel

Beispiel

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

Testen Sie, ob ‹/›

Das <video>-Element bietet Abspiel-, Pausier- und Lautstärkeregler, um das Video zu steuern.

Gleichzeitig bietet das <video>-Element auch die width- und height-Eigenschaften an, um die Größe des Videos zu steuern. Wenn Höhe und Breite festgelegt sind, wird der erforderliche Videospeicher bei der Seite laden behalten. Wenn diese Eigenschaften nicht festgelegt sind, weiß der Browser nicht die Größe des Videos, und der Browser kann keine spezifische Fläche beim Laden behalten, die Seite wird entsprechend der Größe des Originalvideos geändert.

<video> mit</Der Inhalt zwischen den <video>-Tags wird für Browser bereitgestellt, die das <video>-Element nicht unterstützen.

Das <video>-Element unterstützt mehrere <source>-Elemente. Das <source>-Element kann verschiedene Video-Dateien verlinken. Der Browser verwendet das erste erkannte Format:

Videoformate und die Unterstützung durch Browser

Derzeit unterstützt das <video>-Element drei Videoformate: MP4, WebM und Ogg:

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NEIN	NEIN
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NEIN	NEIN
Opera	YES (ab Opera 25 )	YES	YES

MP4 = mit H.264 MPEG mit Video- und AAC-Audio-Kodierung 4 Datei
WebM = mit VP8 WebM-Datei mit VP-Video- und AAC-Audio-Kodierung
Ogg = Ogg-Datei mit Theora-Video- und Vorbis-Audio-Kodierung

Videoformat

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - Steuerung mit DOM

HTML5 　Die <video> und <audio>-Elemente verfügen ebenfalls über Methoden, Eigenschaften und Ereignisse.

Die Methoden, Eigenschaften und Ereignisse der <video> und <audio>-Elemente können mit JavaScript gesteuert werden.

Die Methoden dienen zum Abspielen, Pausieren und Laden usw. Die Eigenschaften (z.B. Länge, Lautstärke usw.) können gelesen oder eingestellt werden. Die DOM-Ereignisse können Sie benachrichtigen, dass z.B. das <video>-Element begonnen hat zu spielen, pausiert, gestoppt usw.

Die einfachen Methoden im Beispiel zeigen uns, wie man den <video>-Element, die Eigenschaften lesen und setzen sowie die Methoden aufrufen kann.

Online-Beispiel 1

Erstellen Sie eine einfache Wiedergabe für Videos/Pausen- und Größenanpassungssteuerung:

Die obigen Beispiele haben zwei Methoden aufgerufen: play() und pause(). Sie haben auch zwei Attribute verwendet: paused und width.

Weitere Referenzen finden Sie HTML5 Audio/Video-DOM-Referenzhandbuch.

HTML5 Video-Tag

Tag	Beschreibung
<video>	Definiert ein Video
<source>	Definiert verschiedene Mediendateien, z.B. <video> und <audio>
<track>	Definiert in der Textspur des Medienplayers

HTML5 Audio (Audio)HTML5 Geolokalisierung