Inhaltsverzeichnis
Audio- und Videobezogene Attribute
Audio- und Videobezogene Methoden
Audio- und videobezogene Ereignisse
Heim Web-Frontend H5-Tutorial Detaillierte Einführung in HTML5-Multimedia-Audio und -Video (2)

Detaillierte Einführung in HTML5-Multimedia-Audio und -Video (2)

May 19, 2017 pm 04:55 PM

Zuvor haben wir die grundlegendste Verwendung von Audio und Video gelernt. Um die Wiedergabe von Audio und Video flexibler zu steuern, müssen wir die zugehörigen Attribute, Methoden und Ereignisse lernen, die von HTML5 bereitgestellt werden.

Audio- und Videobezogene Attribute

属性 描述
src 用于指定媒体资源的URL地址
autoplay 资源加载后自动播放
buffered 用于返回一个TimeRanges对象,确认浏览器已经缓存媒体文件。
controls 提供用于播放的控制条
currentSrc 返回媒体数据的URL地址
currentTime 获取或设置当前的播放位置,单位为秒
defaultPlaybackRate 返回默认播放速度
duration 获取当前媒体的持续时间
loop 设置或返回是否循环播放
muted 设置或返回是否静音
networkState 返回音频视频当前网络状态
paused 检查视频是否已暂停
playbackRate 设置或返回音频视频的当前播放速度
played 返回TimeRanges对象。TimeRanges表示用户已经播放的音频视频范围
preload 设置或返回是否自动加载音视频资源
readyState 返回音频视频当前就绪状态
seekable 返回TimeRanges对象,表明可以对当前媒体资源进行请求
seeking 返回是否正在请求数据
valume 设置或返回音量,值为0到1.0

Audio- und Videobezogene Methoden

方法 描述
canPlayType() 检测浏览器是否能播放指定的音频、视频
load() 重新加载音频、视频元素
pause() 停止当前播放的音频、视频
play() 开始播放当前音频、视频

Audio- und videobezogene Ereignisse

事件 描述
canplay 当浏览器能够开始播放指定的音视频时,发生此事件
canplaythrough 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频视频时,发生此事件
durationchange 当音频、视频的时长数据发生变化时,发生此事件
loadeddata 当当前帧数据已加载,但没有足够的数据来播放指定音频视频的下一帧时,会发生此事件
loadedmatadata 当指定的音频视频的元数据已加载时,会发生此事件。元数据包括时长、尺寸(仅视频)以及文本轨道
loadstart 当浏览器开始寻找指定的音频视频时,发生此事件
progress 正在下载指定的音频视频时,发生此事件
abort 音频视频终止加载时,发生此事件
ended 音频视频播放完成后,发生此事件
error 音频、视频加载错误时,发生此事件
pause 音频视频暂停时,发生此事件
play 开始播放时,发生此事件
playing 因缓冲而暂停或停止后已就绪时触发此事件
ratechange 音频视频播放速度发生改变时,发生此事件
seeked 用户已移动、跳跃到音频视频中的新位置时,发生此事件
seeking 用户开始移动、跳跃到新的音频视频播放位置时,发生此事件
stalled 浏览器尝试获取媒体数据,但数据不可用时触发此事件
suspend 浏览器刻意不加载媒体数据时触发此事件
timeupdate 播放位置发生改变时触发此事件
volumechange 音量发生改变时触发此事件
waiting 视频由于需要缓冲而停止时触发此事件

[Verwandte Empfehlungen]

1 Detaillierte Erläuterung der HTML5-Video-Tag-Testanwendung

2 . Verwenden Sie das Videoelement, um einen Videoplayer in HTML 5 zu erstellen

3 Teilen Sie das Problem und die Lösung eines Video-Tags, das mp4 nicht abspielen kann

4 . Die Lösung für das Problem, dass das H5-Video-Tag nur Ton, aber kein Video abspielen kann

5. Der MIME von IIS registriert den MP4-Typ nicht, was zur Folge hat in der Lösung für die Unfähigkeit, das Vidoe-Tag zu erkennen

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML5-Multimedia-Audio und -Video (2). 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

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML 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 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 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 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 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 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 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 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