您的位置：首页 > Web前端 > HTML5

HTML5之音频audio知识（部分vedio）

2015-08-11 01:03 701 查看
HTML总结（二）【HTML5之音频】

HTML5重点知识之音频

audio标签兼容性：

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签。
注释：Internet Explorer 8 以及更早的版本不支持 <audio> 标签。


audio的常用属性：

src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
duration： 返回媒体的播放总时长，单位秒
currentTime：  当前播放的时间，单位秒
buffered： 返回缓冲部件的时间范围(TimeRanges对象)
loop：    是否循环播放
volume：    音量值


audio继承media的属性

audioTracks    返回可用的音轨列表（MultipleTrackList对象）
autoplay    媒体加载后自动播放
controller    返回当前的媒体控制器（MediaController对象）
controls    显示播控控件
crossOrigin    CORS设置
currentSrc    返回当前媒体的URL
defaultMuted    缺省是否静音
defaultPlaybackRate    播控的缺省倍速
ended    返回当前播放是否结束标志
error    返回当前播放的错误状态
initialTime    返回初始播放的位置
mediaGroup    当前音视频所属媒体组 (用来链接多个音视频标签)
muted    是否静音
networkState    返回当前网络状态
paused    是否暂停
playbackRate    播放的倍速
played    当前播放部件已经播放的时间范围(TimeRanges对象)
preload    页面加载时是否同时加载音视频
readyState    返回当前的准备状态
seekable    返回当前可跳转部件的时间范围(TimeRanges对象)
seeking    返回用户是否做了跳转操作
startOffsetTime    返回当前的时间偏移(Date对象)
textTracks    返回可用的文本轨迹(TextTrackList对象)
videoTracks    返回可用的视频轨迹(VideoTrackList对象)


audio的方法：

load(); //加载
play();//播放
pause();//暂停
stop();//暂停


audio的事件(点击具体事件可查看案例)：

当音频/视频处于加载过程中时，会依次发生以下事件：loadstart>durationchange>loadedmetadata>loadeddata>progress>canplay>canplaythrough

注：  audio和video同属于media所以很多事件都相同，所以使用同一个案例
每次刷新的时候，触发加载过程中的七种事件
代码来源于http://www.w3school.com.cn/tiy/t.asp?f=html5_av_event_canplay【修改了少部分】


javascript监听audio事件的三种方法

第一种：<audio|video onloadstart="SomeJavaScriptCode">
第二种：audio|video.onloadstart=SomeJavaScriptCode;
第三种：使用 addEventListener()：
audio|video.addEventListener("loadstart", function()
{
//SomeJavaScriptCode
}
);


loadstart 当浏览器开始加载媒介数据时运行脚本

<html>
<body>
<video id="video1" controls="controls">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
</video>
<script>
myVid=document.getElementById("video1");
myVid.onloadstart=alert("视频已经加载完毕触发loadstart事件！但是因为alert中断而没有播放，当你点击alert确认键或者关闭alert时候，视频就会开始播放。");
</script>
</body>
</html>

原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签

durationchange 当媒介长度改变时运行脚本

<html>
<body>
<video id="video1" controls="controls">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
</video>
<script>
myVid=document.getElementById("video1");
myVid.ondurationchange=alert("视频已经加载完毕触发durationchange事件！但是因为alert中断而没有播放，当你点击alert确认键或者关闭alert时候，视频就会开始播放。");
</script>
</body>
</html>

原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签

loadedmetadata 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本

具体案例请复制loadstart或者canplay事件，重复性工作不再累赘书写


onloadeddata 当加载媒介数据时运行脚本

具体案例请复制loadstart或者canplay事件，重复性工作不再累赘书写


progress 当浏览器正在取媒介数据时运行脚本

具体案例请复制loadstart或者canplay事件，重复性工作不再累赘书写


canplay 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本

<html>
<body>
<video id="video1" controls="controls">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签
</video>
<script>
myVid=document.getElementById("video1");
myVid.oncanplay=function(){alert("视频已经加载完毕触发canplay事件！但是因为alert中断而没有播放，当你点击alert确认键或者关闭alert时候，视频就会开始播放。");}
</script>
</body>
</html>
注意：因为前面依次触发了三个事件，所以这里时间段里已经不需要缓冲停止，这个事件不被触发，如果要测试请单独测试这个功能。

原因一：博客插入视频/音频方法不对或者不支持。原因二你的浏览器不支持audio标签

canplaythrough 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本

具体案例请复制loadstart或者canplay事件，重复性工作不再累赘书写

emptied 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本

emptied这个事件不常用，如果遇到异常可以用其他事件代替。

ended 当媒介已抵达结尾时运行脚本

<html>
<body>
<div>当视频播放完以后触发alert事件"这个视频播放结束！"</div>
<video id="video_ended" controls="controls">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video_ended");
myVid.addEventListener("ended", function()
{
alert("这个视频播放结束！");
}
);
</script>
</body>
</html>

当视频播放完以后触发alert事件"这个视频播放结束！"

Your browser does not support HTML5 video.

error 当在元素加载期间发生错误时运行脚本

浏览器支持：只有 Internet Explorer 9 支持 error 属性。
audio|video.error.code
MediaError 对象的 code 属性返回一个数字值，它表示音频/视频的错误状态：
1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频
<html>
<body>
<button onclick="getError()" type="button">获得错误状态</button>
<br />
<br />
<video id="video1" controls="controls" autoplay="autoplay">
<source src="/example/html5/mov_broken.mp4" type="video/mp4">
<source src="/example/html5/mov_broken.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getError()
{
alert(myVid.error.code);
}
</script>
</body>
</html>


pause 当媒介数据暂停时运行脚本

这个很简单，就是发生暂停事件被触发。在pause()方法被执行的时候触发起来比较容易。
例如：一下的pauseBtn被点击的时候触发了pause事件，执行 alert("音频暂停播放");
<audio id="myAudio" controls="controls" autoplay="autoplay">
<button id ="pauseBtn">暂停audio</button>
var aud = document.getElementById("myAudio");
pauseBtn.onclick = function(){
aud.pause();
}
aud.onpause = function() {
alert("音频暂停播放");
};


play 当媒介数据将要开始播放时运行脚本

案例参照pause事件，不再累赘书写。


playing 当媒介数据已开始播放时运行脚本

案例参照loadstart事件，不再累赘书写。


ratechange 当媒介数据的播放速率改变时运行脚本

一般来说是当用户切换到慢动作或快进模式时候触发。


readystatechange 当就绪状态（ready-state）改变时运行脚本

就绪状态监测媒介数据的状态


seeked 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本

seeking 当媒介元素的定位属性为真且定位已开始时运行脚本

stalled 当取回媒介数据过程中（延迟）存在错误时运行脚本

suspend 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本

timeupdate 当媒介改变其播放位置时运行脚本

volumechange 当媒介改变音量亦或当音量被设置为静音时运行脚本

当音量变化的时候触发该事件


waiting 当媒介已停止播放但打算继续播放时运行脚本

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航