So betten Sie Videos in HTML5 ein-H5-Tutorial-php.cn

Heim

Web-Frontend

H5-Tutorial

So betten Sie Videos in HTML5 ein

王林

Nov 17, 2020 pm 03:48 PM

html5 视频

So betten Sie Videos in HTML5 ein

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7694

Java-Tutorial

1640

CakePHP-Tutorial

1393

Laravel-Tutorial

1287

PHP-Tutorial

1229

Related knowledge

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles