HTML5多媒体audio和video(二)
程序员文章站
2022-05-03 09:07:34
前面我们学习了audio和video最基本的用法,为了更加灵活的控制音视频的播放,我们就需要学习HTML5为我们提供的相关属性、方法和事件了。
audio和video相关属性...
前面我们学习了audio和video最基本的用法,为了更加灵活的控制音视频的播放,我们就需要学习HTML5为我们提供的相关属性、方法和事件了。
audio和video相关属性
属性 | 描述 |
---|---|
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和video相关方法
方法 | 描述 |
---|---|
canPlayType() | 检测浏览器是否能播放指定的音频、视频 |
load() | 重新加载音频、视频元素 |
pause() | 停止当前播放的音频、视频 |
play() | 开始播放当前音频、视频 |
audio和video相关事件
事件 | 描述 |
---|---|
canplay | 当浏览器能够开始播放指定的音视频时,发生此事件 |
canplaythrough | 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频视频时,发生此事件 |
durationchange | 当音频、视频的时长数据发生变化时,发生此事件 |
loadeddata | 当当前帧数据已加载,但没有足够的数据来播放指定音频视频的下一帧时,会发生此事件 |
loadedmatadata | 当指定的音频视频的元数据已加载时,会发生此事件。元数据包括时长、尺寸(仅视频)以及文本轨道 |
loadstart | 当浏览器开始寻找指定的音频视频时,发生此事件 |
progress | 正在下载指定的音频视频时,发生此事件 |
abort | 音频视频终止加载时,发生此事件 |
ended | 音频视频播放完成后,发生此事件 |
error | 音频、视频加载错误时,发生此事件 |
pause | 音频视频暂停时,发生此事件 |
play | 开始播放时,发生此事件 |
playing | 因缓冲而暂停或停止后已就绪时触发此事件 |
ratechange | 音频视频播放速度发生改变时,发生此事件 |
seeked | 用户已移动、跳跃到音频视频中的新位置时,发生此事件 |
seeking | 用户开始移动、跳跃到新的音频视频播放位置时,发生此事件 |
stalled | 浏览器尝试获取媒体数据,但数据不可用时触发此事件 |
suspend | 浏览器刻意不加载媒体数据时触发此事件 |
timeupdate | 播放位置发生改变时触发此事件 |
volumechange | 音量发生改变时触发此事件 |
waiting | 视频由于需要缓冲而停止时触发此事件 |
推荐阅读
-
HTML5 video标签(播放器)学习笔记(二):播放控制
-
HTML5 Video标签的属性、方法和事件汇总介绍
-
HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
-
HTML5视频播放标签video和音频播放标签audio标签的正确用法
-
HTML5多媒体audio和video(二)
-
HTML5播放video或者audio
-
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
-
C#获取设备(Audio和Video)名称 简单整理
-
HTML5 多媒体video,autio使用示例
-
HTML5实战与剖析之媒体元素(1、video标签和audio标签简介)