这篇“HTML5多媒体audio和video相关属性有哪些”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“HTML5多媒体audio和video相关属性有哪些”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。
前面我们学习了audio和video最基本的用法,为了更加灵活的控制音视频的播放,我们就需要学习HTML5为我们提供的相关属性、方法和事件了。
| 属性 | 描述 |
|---|---|
| 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 |
| 方法 | 描述 |
|---|---|
| canPlayType() | 检测浏览器是否能播放指定的音频、视频 |
| load() | 重新加载音频、视频元素 |
| pause() | 停止当前播放的音频、视频 |
| play() | 开始播放当前音频、视频 |
| 事件 | 描述 |
|---|---|
| canplay | 当浏览器能够开始播放指定的音视频时,发生此事件 |
| canplaythrough | 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频视频时,发生此事件 |
| durationchange | 当音频、视频的时长数据发生变化时,发生此事件 |
| loadeddata | 当当前帧数据已加载,但没有足够的数据来播放指定音频视频的下一帧时,会发生此事件 |
| loadedmatadata | 当指定的音频视频的元数据已加载时,会发生此事件。元数据包括时长、尺寸(仅视频)以及文本轨道 |
| loadstart | 当浏览器开始寻找指定的音频视频时,发生此事件 |
| progress | 正在下载指定的音频视频时,发生此事件 |
| abort | 音频视频终止加载时,发生此事件 |
| ended | 音频视频播放完成后,发生此事件 |
| error | 音频、视频加载错误时,发生此事件 |
| pause | 音频视频暂停时,发生此事件 |
| play | 开始播放时,发生此事件 |
| playing | 因缓冲而暂停或停止后已就绪时触发此事件 |
| ratechange | 音频视频播放速度发生改变时,发生此事件 |
| seeked | 用户已移动、跳跃到音频视频中的新位置时,发生此事件 |
| seeking | 用户开始移动、跳跃到新的音频视频播放位置时,发生此事件 |
| stalled | 浏览器尝试获取媒体数据,但数据不可用时触发此事件 |
| suspend | 浏览器刻意不加载媒体数据时触发此事件 |
| timeupdate | 播放位置发生改变时触发此事件 |
| volumechange | 音量发生改变时触发此事件 |
| waiting | 视频由于需要缓冲而停止时触发此事件 |
感谢你的阅读,希望你对“HTML5多媒体audio和video相关属性有哪些”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注创新互联行业资讯频道!