Heim > Artikel > Web-Frontend > So betten Sie Videos in HTML5 ein

So betten Sie Videos in HTML5 ein

王林nach vorne: 2020-11-17 15:48:576470Durchsuche

Zunächst müssen wir wissen, dass HTML5 die Wiedergabe von Audio- und Videodateien direkt im Browser unterstützt, ohne das Adobe Flash-Plug-in zu verwenden.

Nachteile von Plug-Ins: Plug-Ins sind eine der Hauptursachen für Browserabstürze, insbesondere Flash, das viele Probleme mit sich bringt.

(Video-Lernempfehlung: HTML5-Video-Tutorial)

Um Videos in Webseiten einzubetten, verwenden Sie das Videoelement.

Definition und Verwendung

Tipps

Sie können Textinhalte zwischen dem Start-Tag und dem End-Tag platzieren, sodass alte Browser die Meldung anzeigen können, dass das Tag nicht unterstützt wird

Attribut:

So betten Sie Videos in HTML5 ein

Beispiel:

<!DOCTYPE HTML>
<html>
<body>
 
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
 
</body>
</html>

So betten Sie Videos in HTML5 ein

Vom Browser unterstützte Videoformate

So betten Sie Videos in HTML5 ein

Ogg = Ogg-Datei mit Theora-Videokodierung und Vorbis-Audiokodierung

MPEG 4 = MPEG 4-Datei mit H.264-Videokodierung und ACC-Audiodatei

WebM = mit Es gibt WebM-Dateien mit VP8-Videokodierung und Vorbis-Audiokodierung

Zusammenfassung: Kein einzelnes Format kann alle Browser unterstützen

Die einfachste Methode ist die gleichzeitige Verwendung der Audio- und Videoformate MP4 und OGV

2 Fügen Sie das Element Quelle in der Mitte von ein. Das Quellelement wird verwendet, um das Videoformat festzulegen, einschließlich der Attribute src und type

Beispiel:

<video src=&#39;视频1.mp4&#39; heigth=&#39;500px&#39; controls>
  <source src=&#39;视频2.mp4&#39; type=&#39;video/mp4&#39;>   <!-- 当‘视频1.mp4’无法播放时，会跳转到src=&#39;视频2.mp4&#39; -->
  <source src=&#39;视频2.ogv&#39; type=&#39;video/ogg&#39;>   <!-- 当浏览器不支持MP4格式的视频时，会自动找此处ogv格式的视频 -->
  <source src=&#39;视频2.webm&#39; type=&#39;video/webm&#39;>
</video>

Es gibt zwei optionale Videoformate Mp4 und Ogv . Video-Links werden nun nicht mehr über das src-Attribut des Video-Elements angegeben, sondern werden separat über das Source-Element hervorgehoben. Mit dem Quellelement können wir Videodateien in mehreren optionalen Formaten angeben, sodass die Videodatei im späteren Format ausgewählt werden kann, wenn der Browser das vorne angegebene Format nicht unterstützt.

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonSo betten Sie Videos in HTML5 ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Welche neuen Tags werden zu HTML5 hinzugefügt?Nächster Artikel：Welche neuen Tags werden zu HTML5 hinzugefügt?

In Verbindung stehende Artikel

Mehr sehen