HTML5中视频音频的使用详解

API 事件说明
play   video.play(); 播放视频  
pause   video.pause(); 暂停播放视频  
load   video.load(); 将全部属性回复默认值，视频恢复重新开始状态  
canPlayType   var support = videoid.canPlayType(‘video/mp4′); 

判断浏览器是否支持当前类型的视频格式

返回值：
        空字符串：不支持Maybe：可能支持Probably：完全支持  

常用方法

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

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

1.4.2网络状态

获取video对象

Media = document.getElementById("media");

1.Media.currentSrc; 

返回当前资源的URL 

2.Media.src = value; 

返回或设置当前资源的URL 

3.Media.canPlayType(type); 

是否能播放某种格式的资源 

4.Media.networkState; 

0.此元素未初始化 

1.正常但没有使用网络 

2.正在下载数据 

3.没有找到资源 

5.Media.load(); 

重新加载src指定的资源 

6.Media.buffered; 

返回已缓冲区域，TimeRanges 

7.Media.preload; 

none:不预载 

metadata:预载资源信息 

auto: 

1.4.3 准备状态

1.Media.readyState 

2.Media.seeking; 

是否正在seeking 

1.4.4 回放状态

1.Media.currentTime = value; 

当前播放的位置，赋值可改变位置 

2.Media.startTime; 

一般为0，如果为流媒体或者不从0开始的资源，则不为0 

3.Media.duration; 

当前资源长度 流返回无限 

4.Media.paused; 

是否暂停 

5.Media.defaultPlaybackRate = value; 

默认的回放速度，可以设置 

6.Media.playbackRate = value; 

当前播放速度，设置后马上改变 

7.Media.played; 

返回已经播放的区域，TimeRanges，关于此对象见下文 

8.Media.seekable; 

返回可以seek的区域 TimeRanges 

9.Media.ended; 

是否结束 

10.Media.autoPlay; 

是否自动播放 

11.Media.loop; 

是否循环播放 

12.Media.play(); 

播放 

13.Media.pause(); 

暂停 

1.4.5 视频控制

Media.controls;//是否有默认控制条

Media.volume = value; //音量

Media.muted = value; //静音

TimeRanges(区域)对象

TimeRanges.length; //区域段数

TimeRanges.start(index) //第index段区域的开始位置

TimeRanges.end(index) //第index段区域的结束位置

1.4.6 相关事件

1.首先绑定事件的话可以通过js中的addEventListener方法来绑定事件 

事件 说明
loadstart   客户端开始请求数据  
progress   客户端正在请求数据  
suspend   延迟下载  
abort   客户端主动终止下载（不是因为错误引起）  
loadstart   客户端开始请求数据  
progress   客户端正在请求数据  
error   请求数据时遇到错误  
stalled   网速失速  
play   play()和autoplay开始播放时触发  
pause   pause()触发  
loadedmetadata   成功获取资源长度  
loadeddata   -  
waiting   等待数据，并非错误  
playing   开始回放  
canplay   可以播放，但中途可能因为加载而暂停  
canplaythrough   可以播放，歌曲全部加载完毕  
seeking   寻找中  
seeked   寻找完毕  
timeupdate   播放时间改变  
ended   播放结束  
ratechange   播放速率改变  
durationchange   资源长度改变  
volumechange   音量改变  

2.常用事件 

oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。

ontimeupdate： 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。

onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。

1.4.7 其他

1.全屏:

element.webkitRequestFullScreen();( webkit)

element.mozRequestFullScreen(); (Firefox )

element.requestFullscreen(); (W3C )

2.退出全屏：

document.webkitCancelFullScreen(); (webkit )

document.mozCancelFullScreen(); (Firefox)

document.exitFullscreen(); (W3C)

二、audio

2.1 audio格式

1.常见的音频格式

音频编码：ACC、MP3、Vorbis 

2.HTML5支持的音频格式：

Ogg 免费 支持的浏览器:C、F、O

MP3 收费 支持的浏览器: I、C、S

Wav 收费 支持的浏览器: F、O、S

2.2 audio标签中的一些常用属性

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!