Heim > Web-Frontend > H5-Tutorial > Hauptteil

Detaillierte Einführung in das Video-Tag in HTML5

不言
Freigeben: 2018-10-26 14:50:08
nach vorne
4681 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine detaillierte Einführung in das Video-Tag in HTML5. Freunde in Not können darauf verweisen.

<video src="http://www.lorem.com/video/lorem.mp4" controls="controls" width="500" height="300"></video>
Nach dem Login kopieren

MP4 = MPEG 4-Datei mit H264-Videocodec und AAC-Audiocodec

WebM = WebM-Datei verwendet VP8-Videocodec und Vorbis-Audiocodec

Ogg = Ogg-Datei verwendet Theora-Videocodec und Vorbis-Audiocodec

Anhand der obigen Informationen finden wir nur h264-codierte MP4-Videos (MPEG-LA-Unternehmen) VP8-codierte Videos im WebM-Format (Google-Unternehmen) und Theora-codierte Videos im OGG-Format (iTouch-Entwicklung) können das HTML5-Tag

Was passiert, wenn der Browser das Video-Tag nicht unterstützt?

Zum Beispiel unterstützen IE-Browser und ältere Browserversionen HTML5 nicht sehr gut. Was sollten wir tun, wenn Benutzer diese Browser verwenden, um unsere Webseiten mit Videos zu öffnen?

Wir können den Code so schreiben:

<video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的浏览器不支持播放该视频!</video>
Nach dem Login kopieren

Auf diese Weise wird in Browsern, die HTML5 nicht unterstützen, die Meldung „Ihr Browser unterstützt die Wiedergabe dieses Videos nicht!“ angezeigt!

Erklärung der erweiterten Parameter des Video-Tags:

Das Videoelement ermöglicht mehrere Quellelemente. Das Quellelement kann verschiedene Videodateien verknüpfen. Der Browser verwendet das erste erkannte Format, sodass wir nur noch ein paar Videos in anderen Formaten vorbereiten müssen.

Verwendung:

<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>
Nach dem Login kopieren

Autoplay: Das Vorhandensein dieses Attributs bedeutet, dass das Video automatisch abgespielt wird, wenn es bereit ist. Verwendung: autoplay="autoplay"

Steuerelemente: Das Vorhandensein von Dieses Attribut bedeutet, dem Benutzer Steuerelemente wie Wiedergabeschaltflächen usw. anzuzeigen. Verwendung: Kontrollen="Steuerelemente"

Höhe: Höhe festlegen

Breite: Breite festlegen

loop: automatische Wiedergabe, Verwendung: loop="loop"

preload: Das Video wird geladen und für die Wiedergabe vorbereitet, wenn die Seite geladen wird. Verwendung: preload="auto" - Laden Sie das gesamte Video nach Seite wird geladen; preload="meta" – Metadaten nur laden, wenn die Seite geladen wird; preload="none" – Video nicht laden, wenn die Seite geladen wird. Hinweis: Wenn Autoplay verwendet wird, wird das Vorladen ignoriert. Verständnis!

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Video-Tag in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!