HTML5音频与视频

根据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

2.相关方法

• canPlayType - 返回一个字符串以表明客户端是否能够播放指定的媒体,probably/maybe/空字符串
• load - 重置媒体元素并重新载入媒体，方法可宗旨任何正在进行的任务或事件
• pause - 用于暂停媒体的方法，并设置paused属性为true
• play - 播放媒体，并设置paused属性设置为false

3.相关事件

用addEventListener或者直接赋值方式添加事件监听，下面仅列出部分事件：

• canplay - 浏览器能够开始播放媒体数据，但以当前速率不能直接将媒体播放完
• ended - 媒体播放已抵达结尾
• error- 在元素加载期间发生错误
• loadeddata - 已经加载当前播放位置的媒体数据
• pause - 媒体数据暂停播放
• play - 媒体数据简要开始播放
• playing - 媒体数据已经开始播放
• progress - 浏览器正在获取媒体数据
• readystatechange - 就绪状态改变
• stalled - 浏览器获取媒体数据过程中出现异常
• waiting - 媒体已停止播放但打算继续播放

4. 检测音频&视频格式支持情况

主要是利用前面提到的canPlayType方法，下面是检测音频格式是否支持的一段代码(视频格式支持检测方法类似)：

var media = document.createElement('audio');
if(""==media.canPlayType('audio/mpeg')){
    alert("您的浏览器不支持mp3编码");
}else{
    //其他
}