html5 audio api 录音,HTML5 中的 video / audio API——0714

HTML5 DOM 为 和 元素提供了方法、属性和事件。

这些方法、属性和事件允许您使用 JavaScript 来操作 和 元素。

本文介绍常用的方法、属性、和事件。

更多内容请参考：HTML 音频/视频 DOM 参考手册——菜鸟

1、常用的方法

load() 重新加载音频 / 视频元素。

play() 开始播放音频/视频。

pause() 暂停当前播放的音频 / 视频。

2、常用的音频 / 视频 属性

src 设置或返回音频/视频元素的当前来源。

autoplay 自动播放

muted 设置或返回音频/视频是否静音。

defaultMuted 设置或返回音频/视频默认是否静音。

loop 设置或返回音频/视频是否应在结束时重新播放，即：是否循环播放。

preload 设置或返回音频/视频是否应该在页面加载后进行加载。

controller 返回表示音频/视频当前媒体控制器的 MediaController 对象。

controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)。即：是否显示控制条。

volume 设置或返回音频/视频的音量。

buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象。

played 返回表示音频/视频已播放部分的 TimeRanges 对象。

currentTime 设置或返回音频/视频中的当前播放位置(以秒计)。在谷歌上设置的时候注意，src路径是远程路径时有效。

duration 返回当前音频/视频的长度(以秒计)。

playbackRate 设置或返回音频/视频播放的速度。

defaultPlaybackRate 设置或返回音频/视频的默认播放速度。

注释： TimeRanges

TimeRanges 对象表示音视频的已缓冲部分。

TimeRanges 对象属性：

length - 获得音视频中已缓冲范围的数量

start(index) - 获得某个已缓冲范围的开始位置

end(index) - 获得某个已缓冲范围的结束位置

注：首个缓冲范围的下表是 0。

Audio的缓存只有一个分段，开始位置为0，结束位置为timeRange.end(0)。

所以一般在用 buffered 和 played 的时候，要在后边加上.end(0)，如：buffered.end(0) 获取当前截止缓冲的时间。

要注意的问题：

有时给 video 设置 autoplay 属性无效

给该 video 标签添加 muted 属性即可。

muted 属性属于逻辑属性，它规定视频的音频输出应该被静音。

这样处理的原因：

高版本浏览器，对视频静音后，可以保证视频自动播放。(如下图)

3、常用的事件

onabort 当音频/视频的加载已放弃时触发。一般用于视频意外终止时。

oncanplay 当浏览器可以开始播放音频/视频时触发。

ondurationchange 当音频/视频的时长已更改时触发。

onemptied 当前播放列表为空时触发。一般发生在网络错误或加载错误时。

onended 当目前的播放列表已结束时触发。视频播放结束时。

onloadeddata 当浏览器已加载音频/视频的当前帧时触发。即：加载视频数据的时候。

onloadstart 当浏览器开始查找音频/视频时触发。即：开始加载视频数据的时候。

onpause 当音频/视频已暂停时触发。

onplay 当音频/视频已开始或不再暂停时触发。

onplaying 当音频/视频在因缓冲而暂停或停止后已就绪时触发。正在播放。

onprogress 当浏览器正在下载音频/视频时触发。获取视频数据时。

onratechange 当音频/视频的播放速度已更改时触发。

ontimeupdate 当目前的播放位置已更改时触发。

onvolumechange 当音量已更改时触发。

onwaiting 当视频由于需要缓冲下一帧而停止时触发。等待缓冲时。

onsuspend 在浏览器刻意不加载媒体数据时触发。该事件在媒体数据被阻止加载时触发。 可以是完成加载后触发，或者因为被暂停的原因。

影响媒体数据加载的事件有：abort、emptied、error、stalled。

onstalled 当浏览器尝试获取媒体数据，但数据不可用时触发。

4、video的其它操作

(1)全屏显示：requestFullscreen

可以加 button 按钮，添加点击事件来实现，下边是点击事件的回调函数：

(要写兼容性)

//全屏 requestFullscreen

function fullScreen() {

if (video.requestFullscreen) {

video.requestFullscreen();

}

else if (video.webkitRequestFullRcreen) {

video.webkitRequestFullRcreen();

}

else if (video.mozRequestFullscreen) {

video.mozRequestFullscreen();

}

else {

video.msRequestFullscreen();

}

}

(2)退出全屏：ExitFullscreen

加 button 按钮，添加点击事件来实现，下边是点击事件的回调函数：

(要写兼容性)

//退出全屏 ExitFullscreen

function closeFullScreen() {

if (video.exitFullscreen) {

video.exitFullscreen();

}

else if (video.webkitCancelFullScreen) {

video.webkitCancelFullScreen();

}

else if (video.mozCancelFullScreen) {

video.mozCancelFullScreen();

}

else {

video.msExitFullscreen();

}

}

(3)下载：

通过给 button 按钮添加点击事件实现。

function download(){

video.downLoad();

}

5、附： HTML5和支持的音视频格式

常见的视频格式：

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

目前， 元素支持三种视频格式： MP4, WebM, 和 Ogg

元素支持三种音频格式文件: MP3, Wav, 和 Ogg