本文摘自PHP中文网，作者黄舟，侵删。
音频与视频现在已经变得越来越流行各个网站为了保证跨浏览器的兼容性
仍然选择使用flash
（源码截自优酷）
多媒体标签
使用
HTML5增加了audio与video两个多媒体标签
兼容性还不错，低版本IE不支持
可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件
而且非常的简单
（源码截自Bilibili）
元素用法如下:
1 2 |
|
标签中内容如果浏览器不支持该标签就会显示
当然使用这两个元素的时候
最起码要添加src属性，属性值就是资源的url
但是每个浏览器由于版权问题支持的媒体格式也不同
所以就可以使用下面的方式
1 2 3 4 5 6 7 8 9 10 11 |
|
这样指定不同的资源格式
也保证了各个浏览器的兼容性
属性
audio和video标签除了src外
还有一些公有的属性
| 属性 | 描述 |
|---|---|
| autoplay | 设置该属性后，音/视频资源就绪后立即播放 |
| controls | 设置该属性后，则显示浏览器播放控制控件 |
| loop | 设置该属性后，则音/视频结束后重新循环开始播放 |
| preload | 设置该属性后，则音/视频在页面加载时进行加载，并预备播放（使用autoplay会忽略该属性） |
前三个属性属性名与属性值相同，直接添加属性名即可
preload有如下属性值
none 不加载数据
metedata 仅加载元数据（时长、比特率、帧大小等）
auto 浏览器加载它认为适量的媒体内容
比如想要在浏览器添加一段音乐
并且加载后立即播放，循环播放
使用浏览器的播放控件
1 |
|
控件的样式各个浏览器都不一样
随着浏览器版本的更新，可能还会更新样式
video元素还有独有的属性poster
属性值是图片资源的url
用来设置视频播放前的一张占位图片
1 |
|
点击播放后，视频正常播放 
脚本化音视频
元素
使用js获取dom节点就很简单了
1 |
|
类似于image的Image构造函数
Audio也可以通过类似的方式创建（Video不可以）
区别在于Image创建的图片是要插入文档的
但是Audio不需要
1 |
|
然后可以为它添加autoplay、loop等属性
然后添加到页面
接口
在获取的DOM节点上可以使用浏览器提供的接口属性和方法
常用的属性、方法如下
currentSrc 媒体数据的URL地址
volume 播放音量
介于0~1（注意超范围会报错），默认1最大音量
muted 是否静音
设置true进入静音模式
playbackRate 媒体播放速度
默认1.0常速，>1快进，<1慢放（负值表回放但无浏览器实现此功能）
defaultPlaybackRate 媒体默认的播放速度
currentTime 当前播放时间（单位s）
duration 媒体时长（单位s）
play() 播放音/视频
pause() 暂停音/视频
load() 重新加载音/视频（通常用于修改元素属性后）
除此之外还有
played 已经播放的时间段
buffered 已经缓冲的时间段
seekable 用户可以跳转的时间段
它们都是TimeRanges对象
每个对象都有一个length属性（表示当前时间段）
以及start()和end()方法（返回当前时间段的起始时间点和结束时间点，单位s）
start()和end()都有一个数字参数，表示第一个时间段
确定当前缓存内容百分比：
相关阅读 >>
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
