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

时间 2019-11-12

标签 html5 html 音频 audio 知识部分 vedio 栏目 HTML5 繁體版

原文原文链接

HTML总结（二）【HTML5之音频】javascript

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标签html

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标签html5

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标签java

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事件"这个视频播放结束！"ide

Your browser does not support HTML5 video.oop

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 当媒介改变音量亦或当音量被设置为静音时运行脚本

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