HTML5音频与视频

tianqi

2015-10-09

根据HTTML5的官方标准，并不需要为任何特定的音频或视频格式提供支持，所以浏览器厂商可以选择他们希望支持的格式。

一、HTML5中播放音频

1. audio元素

HTML5中，使用新增的audio元素来播放声音文件或音频流，支持Ogg Vorbis、MP3和WAV等音频格式。其用法如下

<audio src="sample.mp3" controls="controls">
    您的浏览器不支持audio标签
</audio>

2.播放音频

下面是一段完整的播放音频的代码

<audio controls="controls" autoplay loop>
    <source src="sample.ogg" type="audio/ogg">
    <source src="sample.mp3" type="audio/mpeg">
    您的浏览器不支持audio标签
</audio>

注：

*audio之间的内容是为不支持audio元素的浏览器准备的替换内容；

*src直接指向媒体文件，如果浏览器不支持相关内容或编解码器时，需要用到备用声明，浏览器从这些数据源中进行选择(如上多个source)；

*srouce用type声明的媒体属性如果与媒体文件不匹配，浏览器可能拒绝播放，如果不明确type类型，可以省略。

二、HTML5中播放视频

1. video元素

HTML5中，使用新增的video元素来播放视频文件或视频流，支持Ogg、MPEG-4、WebM等视频格式，用法如下：

<video src="sample.mp4" controls="controls">
    您的浏览器不支持HTML5视频
</video>

2. 播放视频

下面是播放视频的一个完整示例，浏览器会选择source列表中第一个可以识别的格式。

<video controls="controls" autoplay>
    <source src="sample.mp4" type="video/mp4">
    <source src="sample.ogg" type="video/ogg">
    您的浏览器不支持HTML5视频
</video>

三、音频&视频相关属性、方法与事件

下面只介绍一些视频、音频相关的

1.相关属性

autobuffer - 自动缓冲，可读写属性，true/false
autoplay - 自动播放，可读写属性，true/false
buffered - 只读属性，返回TimeRanges对象，确认浏览器已经缓存媒体文件
controls - 为媒体文件提供控制条，可读写属性，controls
currentSrc - 媒体数据的URL地址，，只读属性，无默认值
currentTime - 当前播放位置，可读写属性，返回值为时间(单位：秒)
duration - 媒体的持续时间，只读属性，返回值为时间(单位：秒)
ended - 是否播放结束，只读属性，返回布尔值
error - 返回一个MediaError对象表明错误状态，只读属性(MEDIA_ERR_ABORTED媒体资源获取异常，MEDIA_ERR_NETWORK网络错误，MEDIA_ERR_DECODE媒体解码错误，MEDIA_ERR_SRC_NOT_SUPPORTED媒体格式不支持)
initialTime - 获取最早的可用于回放的位置，只读属性，返回值为时间(单位：秒)
loop - 播放结束是否重新开始播放，可读写属性
muted - 播放时是否开启静音，可读写属性，true/false(开启静音/未开启静音)
networkState - 返回媒体的网络状态，只读属性
paused - 媒体是否暂停播放，只读属性，true/fase(暂停/正在播放)
playbackRate - 读取或设置媒体资源播放的当前速率，可读写属性
played - 媒体在浏览器中已播放的时间范围，只读属性
preload - 定义视频是否预加载，可读写属性，none/metadata/auto
readyState - 当前播放位置的就绪状态，只读属性
seekable - 可以对当前媒体资源进行请求，只读属性
seeking - 浏览器是否正在请求某一播放位置的的媒体数据，只读属性，true/false
src - 指定媒体资源的URL位置，可读写属性
volume - 获取或设置音量，可读写属性，范围0.0~1.0