Grundlegende Methoden zum Einbetten von Audio- und Videowiedergabe in Webseiten mithilfe von HTML5

Heim

Web-Frontend

H5-Tutorial

Grundlegende Methoden zum Einbetten von Audio- und Videowiedergabe in Webseiten mithilfe von HTML5_html5-Tutorial-Tipps

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

audio html5 video 视频音频

HTML5-Funktionen einschließlich nativer Audio- und Videounterstützung ohne Flash.

Mit den

HTML5-Tags

Ein Video einbetten
Die folgende Methode ist die einfachste Möglichkeit, eine Videodatei in eine Webseite einzubetten:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<Video src="foo.mp4" Breite="300" Höhe=„200“ Steuerelemente>
Ihr Browser unterstützt das <Video>-Element nicht.
Video>

Der aktuelle HTML5-Spezifikationsentwurf legt nicht fest, welche Videoformate Browser im Video-Tag unterstützen sollen. Die am häufigsten verwendeten Videoformate sind jedoch:

Ogg: Ogg-Dateien mit Thedora-Video-Encoder und Vorbis-Audio-Encoder.

mpeg4: MPEG4-Datei mit H.264-Video-Encoder und AAC-Audio-Encoder.

Wir können Mediendateien mithilfe des -Tags mit Medientyp und anderen Attributen angeben. Das Videoelement lässt mehrere Quellelemente zu und der Browser verwendet das erste erkannte Format:

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

>
<html>
<Körper>
<Video Breite="300" Höhe="200" steuert die automatische Wiedergabe>
<Quelle src="/html5 /foo.ogg" type="video/ogg" /> ;
<Quelle src="/html5 /foo.mp4" type="video/mp4" /> ;
Ihr Browser unterstützt das Element <Video> nicht.
Video>
Körper>
html>

Video 属性规范
HTML5-Video >

Audio einbetten
HTML5 unterstützt das

属性	描述
autoplay	如果指定这个布尔值属性，只要没停止加载数据，音频就会立刻自动开始播放。
autobuffer	如果指定这个布尔值属性，即使没有设置自动播放，音频也会自动开始缓冲。
controls	如果指定这个属性，表示允许用户控制音频播放，包括音量控制，快进以及暂停/恢复播放。
loop	如果指定这个布尔值属性，表示允许音频播放结束后自动回放。
preload	这个属性指定加载页面时加载音频并准备就绪。如果指定自动播放则忽略。
src	要嵌入的音频 URL。可选，可以在音频块里面使用元素指定要嵌入的音频来替代。

事件	描述
abort	播放中止时生成这个事件。
canplay	足够的数据可用并且媒体可以播放时生成这个事件。
ended	播放完成时生成这个事件。
error	发生错误时生成这个事件。
loadeddata	媒体第一帧载入完成时生成这个事件。
loadstart	开始加载媒体时生成这个事件。
pause	播放暂停时生成这个事件。
play	播放开始或者恢复时生成这个事件。
progress	定期通知媒体下载进度时生成这个事件。
ratechange	播放速度改变时生成这个事件。
seeked	快进操作完成时生成这个事件。
seeking	快进操作开始时生成这个事件。
suspend	媒体加载被暂停时生成这个事件。
volumechange	音频音量变化时生成这个事件。
waiting	请求操作（比如播放）被延迟，等待另一个操作完成（比如快进）时生成这个事件。

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

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

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

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

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?

7480

CakePHP-Tutorial

1377

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

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.

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.

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-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.

Klipsch stellt die Flaggschiff-Soundbar Flexus Core 300 mit 8K-Unterstützung, 12 Lautsprechern und Raumkorrektur vor Sep 05, 2024 am 10:16 AM

Der Klipsch Flexus Core 300 ist das Topmodell der Serie und positioniert sich über dem bereits verfügbaren Flexus Core 200 im Soundbar-Sortiment des Unternehmens. Laut Klipsch handelt es sich um die erste Soundbar der Welt, deren Klang sich an die Anforderungen anpassen lässt

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.

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

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.

See all articles