Heim > Artikel > Web-Frontend > Grundlegende Methoden zum Einbetten von Audio- und Videowiedergabe in Webseiten mithilfe von HTML5_html5-Tutorial-Tipps

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

WBOYOriginal: 2016-05-16 15:45:522966Durchsuche

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	请求操作（比如播放）被延迟，等待另一个操作完成（比如快进）时生成这个事件。

Stellungnahme：

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

Vorheriger Artikel：Verwenden von SVG zum Zeichnen des WeChat-Logos mit neuen Funktionen von HTML5 _HTML5-Tutorial-FähigkeitenNächster Artikel：Verwenden von SVG zum Zeichnen des WeChat-Logos mit neuen Funktionen von HTML5 _HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen