H5视频音频

HTML5 DOM 为<video>和<audio>元素提供了方法、属性和事件

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

一.【video/audio（视频/音频）方法】

（1）addTextTrack() 向音频/视频添加新的文本轨道，新的 TextTrack 对象会被添加到视频/音频元素的文本轨道列表中

【兼容：目前无浏览器支持】

<button onclick="addNewTextTrack()" type="button">添加一个新的文本轨道</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
    myVid=document.getElementById("video1");
    function addNewTextTrack(){ 
      text1=myVid.addTextTrack("caption");
      text1.addCue(new TextTrackCue("Test text", 01.000, 04.000,"","","",true));
    } 
</script>

（2）canPlayType() 检测浏览器是否能播放指定的音频/视频类型

【兼容：所有浏览器都支持 canPlayType() 方法，IE8及之前的版本不支持】

canPlayType() 方法可返回下列值之一：

①"probably" - 浏览器最可能支持该音频/视频类型

②"maybe" - 浏览器也许支持该音频/视频类型

③"" - （空字符串）浏览器不支持该音频/视频类型

<p>我的浏览器能够播放 MP4 视频吗？<span>
<button onclick="supportType(event,'video/mp4','avc1.42E01E, mp4a.40.2')" 
type="button">测试</button>
</span></p>
<p>我的浏览器能够播放 OGG 视频吗？<span>
<button onclick="supportType(event,'video/ogg','theora, vorbis')" 
type="button">测试</button>
</span></p>
<script> 
function supportType(e,vidType,codType){ 
  myVid=document.createElement('video');
  isSupp=myVid.canPlayType(vidType+';codecs="'+codType+'"');
  if (isSupp==""){
    isSupp="No";
    }
  e.target.parentNode.innerHTML="Answer: " + isSupp;
  } 
</script>

（3）load() 重新加载音频/视频元素，用于在更改来源或其他设置后对音频/视频元素进行更新

【兼容：除了safari及IE8和之前版本，其他浏览器均兼容】

<button onclick="changeSource()" type="button">更改视频</button>
<br />
<br />
<video id="video1" controls="controls" autoplay="autoplay">
  <source id="mp4_src" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" 
type="video/mp4">
  <source id="ogg_src" src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" 
type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script> 
function changeSource()
  { 
  document.getElementById("mp4_src").src="movie.mp4";
  document.getElementById("ogg_src").src="movie.ogg";
  document.getElementById("video1").load();
  } 
</script>

（4）播放/暂停视频

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

②pause() 暂停音频/视频

【兼容：除了IE8及之前版本，其他浏览器均兼容】

<button onclick="playVid()" type="button">播放视频</button>
<button onclick="pauseVid()" type="button">暂停视频</button>
<br />
<br />
<video id="video1">
  <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>
    var myVideo=document.getElementById("video1");
    function playVid(){
       myVideo.play();
    }
    function pauseVid(){
       myVideo.pause();
    }
</script>

二.【video/audio（视频/音频）属性】

（1）audioTracks 返回表示可用音轨的 AudioTrackList 对象，AudioTrackList 对象表示音视频的可用音轨

【兼容：任何主流浏览器均不支持】

（2）autoplay 加载完成后随即播放音频/视频

【兼容：除了IE8 及之前版本外，其他浏览器均支持】

<button onclick="enableAutoplay()" type="button">启用自动播放</button>
<button onclick="disableAutoplay()" type="button">禁用自动播放</button>
<button onclick="checkAutoplay()" type="button">检查自动播放状态</button>
<br>
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function enableAutoplay(){ 
  myVid.autoplay=true;
  myVid.load();
  } 
function disableAutoplay(){ 
  myVid.autoplay=false;
  myVid.load();
  } 
function checkAutoplay(){ 
  alert(myVid.autoplay);
  } 
</script> 
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">
Big Buck Bunny大巴克兔子</a>.</p>

（3）buffered 返回表示音频/视频已缓冲部分的 TimeRanges（时间缓存）对象

获得视频的第一段缓冲范围（部分），以秒计

<button onclick="getFirstBuffRange()" type="button">获得首个已缓冲范围</button>
<br> 
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getFirstBuffRange(){ 
  alert("Start: " + myVid.buffered.start(0) + " End: "  + myVid.buffered.end(0));
  } 
</script>

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

默认地，音视频元素不会有媒体控制器。如果规定了媒体控制器，controller 属性将以 MediaController 的形式返回它。

【兼容：任何主流浏览器都不支持 controller（调节器）属性】

（5）controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）

【兼容：除了IE8及之前版本外，其他主流浏览器均兼容】

标准的音视频控件包括：播放，暂停，进度条，音量，全屏切换（供视频），字幕（当可用时），轨道（当可用时）

用法：true---显示控件；false---默认，不显示控件

<button onclick="enableControls()" type="button">启动控件</button>
<button onclick="disableControls()" type="button">禁用控件</button>
<button onclick="checkControls()" type="button">检查控件的状态</button>
<br> 
<video id="video1">
  <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("video1");
function enableControls(){ 
  myVid.controls=true;
  myVid.load();
  } 
function disableControls(){ 
  myVid.controls=false;
  myVid.load();
  } 
function checkControls(){ 
  alert(myVid.controls);
  } 
</script>

（6）crossOrigin 设置或返回音频/视频的 CORS 设置

（7）currentSrc （当前Src）返回当前音频/视频的 URL，如果未设置音频/视频，则返回空字符串

【兼容：除了IE8及之前版本外，其他主流浏览器均兼容】

<button onclick="getVid()" type="button">获得当前视频的 URL</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getVid()
  { 
  alert(myVid.currentSrc);
  } 
</script>

（8）currentTime 设置或返回音频/视频中的当前播放位置（以秒计），当设置该属性时，播放会跳跃到指定的位置

【兼容：除了IE8及之前版本外，其他主流浏览器均兼容】

将时间位置设置为 5 秒：

<button onclick="getCurTime()" type="button">获得当前时间的位置</button>
<button onclick="setCurTime()" type="button">把时间位置设置为 5 秒</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getCurTime(){ 
  alert(myVid.currentTime);
  } 
function setCurTime(){ 
  myVid.currentTime=5;
  } 
</script>

（9）defaultMuted（默认静音）设置或返回音频/视频默认是否静音

【兼容：仅Google Chrome 支持 defaultMuted 属性】

【注释：】设置该属性仅会改变默认的静音状态，而不是当前的。要改变当前的静音状态，请使用 muted（静音）属性

<button onclick="getMuted()" type="button">该视频默认是静音的吗？</button>
<button onclick="setToMuted()" type="button">把视频设置为默认静音，并重载视频</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getMuted(){ 
  alert(myVid.defaultMuted);
  } 
function setToMuted(){ 
  myVid.defaultMuted=true;
  myVid.load()
  } 
</script>

（10）muted（静音）设置或返回音频/视频是否应该被静音（关闭声音）

【兼容：除了IE8及之前版本外，其他主流浏览器均兼容】

【注意：】true----关闭音频/视频声音；false----默认，打开音频/视频声音

<button onclick="enableMute()" type="button">关闭声音</button>
<button onclick="disableMute()" type="button">打开声音</button>
<button onclick="checkMute()" type="button">检查静音状态</button>
<br />
<br /> 
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function enableMute(){ 
  myVid.muted=true;
  } 
function disableMute(){ 
  myVid.muted=false;
  } 
function checkMute(){ 
  alert(myVid.muted);
  } 
</script>

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

【兼容：仅Google Chrome 支持 defaultPlaybackRate（默认回放速度）属性】

设置该属性仅会改变默认的播放速度，而不是当前的。要改变当前的播放速度，请使用 playbackRate（回放速度）属性

<button onclick="getPlaySpeed()" type="button">默认的播放速度是多少？</button>
<button onclick="setPlaySpeed()" type="button">把视频设置为慢速播放</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getPlaySpeed(){ 
  alert(myVid.defaultPlaybackRate);
  } 
function setPlaySpeed(){ 
  myVid.defaultPlaybackRate=0.5;
  myVid.load();
  } 
</script>

（12）playbackRate 设置或返回音频/视频播放的速度

【兼容：只有 Google Chrome 和 Safari 支持 playbackRate（回放速度）属性】

语法：audio|video.playbackRate=playbackspeed

【回放速度】playbackspeed（回放速度）为音频/视频的当前播放速度例值：

数值：1.0 正常速度；0.5 半速（更慢）；2.0 倍速（更快）；-1.0 向后，正常速度；-0.5 向后，半速

<button onclick="getPlaySpeed()" type="button">播放速度是多少？</button>
<button onclick="setPlaySpeed()" type="button">将视频设置为以慢速播放</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getPlaySpeed(){ 
  alert(myVid.playbackRate);
  } 
function setPlaySpeed(){ 
  myVid.playbackRate=0.5;
  } 
</script>

（13）duration（持续时间）返回当前音频/视频的长度（以秒计），如果未设置音频/视频，则返回 NaN (Not-a-Number)

【兼容：除了IE8及之前版本，其他主流浏览器均兼容】

<button onclick="getVidDur()" type="button">获得视频的长度</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getVidDur(){ 
  alert(myVid.duration);
  } 
</script>

（14）ended 返回音频/视频的播放是否已结束，

如果播放位置位于音频/视频的结尾时，则音频/视频已结束。返回true，否则返回false

【兼容：除了IE8及之前版本，其他主流浏览器均兼容】

<button onclick="hasVidEnded()" type="button">该视频播放是否已结束？</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function hasVidEnded(){ 
  alert(myVid.ended);
  } 
</script>

（15）error 返回表示音频/视频错误状态的 MediaError（媒体错误）对象，MediaError 对象的 code 属性包含了音频/视频的错误状态

true---设置音频/视频在结束时再次播放；false---默认，设置音频/视频禁止在结束时循环播放

【兼容：只有 Internet Explorer 9 支持 error 属性】

获得视频的错误状态：

myVid=document.getElementById("video1");
alert(myVid.error.code);

（16）loop（循环）设置或返回音频/视频是否应在结束时重新播放

【兼容：除了IE8及之前版本，其他主流浏览器均兼容】

将视频设置为循环播放：

<button onclick="enableLoop()" type="button">启用循环</button>
<button onclick="disableLoop()" type="button">禁用循环</button>
<button onclick="checkLoop()" type="button">检查循环的状态</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function enableLoop(){ 
  myVid.loop=true;
  myVid.load();
  } 
function disableLoop(){ 
  myVid.loop=false;
  myVid.load();
  } 
function checkLoop(){ 
  alert(myVid.loop);
  } 
</script>

（17）mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）

媒体分组允许两个或更多音频/视频元素保持同步。

【兼容：没有主流浏览器支持】

为两段视频设置媒体组合：

<button onclick="getMedGroup()" type="button">获得视频的媒体组合</button>
<button onclick="setMedGroup()" type="button">设置视频的媒体组合</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<video id="video2" 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>
myVid1=document.getElementById("video1");
myVid2=document.getElementById("video2");
function getMedGroup(){ 
  alert("Video 1 media group: " + myVid1.mediaGroup +
 ". Video 2 media group: " + myVid2.mediaGroup);
  } 
function setMedGroup(){ 
  myVid1.mediaGroup="test";
  myVid2.mediaGroup="test";
  } 

</script>

（18）networkState（网络状态）返回音频/视频的当前网络状态

【兼容：除了IE8及之前版本外，其他浏览器均不兼容】

获得视频的当前网络状态：

myVid=document.getElementById("video1");
alert(myVid.networkState);

数字值

表示音频/视频元素的当前网络状态：

0 = NETWORK_EMPTY - 音频/视频尚未初始化

1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络

2 = NETWORK_LOADING - 浏览器正在下载数据

3 = NETWORK_NO_SOURCE - 未找到音频/视频来源

（19）paused（暂停）返回音频/视频是否暂停，设置的话用pause()方法

【兼容：除了IE8及之前版本外，其他浏览器均兼容】

myVid=document.getElementById("video1");
alert(myVid.paused);

（20）played 返回表示音频/视频已播放部分的 TimeRanges（时间范围）对象

【兼容：除了IE8及之前版本外，其他浏览器均不兼容】

myVid=document.getElementById("video1");
alert("Start: " + myVid.played.start(0) + " End: " + myVid.played.end(0));

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

【兼容：所有主流浏览器都支持 seekable（可查找）属性，除了IE8及之前版本不支持，其他浏览器均兼容】

（22）readyState（就绪状态）返回音频/视频当前的就绪状态，就绪状态指示音频/视频是否已准备好播放

【兼容：除了IE8及之前版本外，其他浏览器均不兼容】

获得视频的就绪状态：

myVid=document.getElementById("video1");
alert(myVid.readyState);

数字值

表示音频/视频元素的就绪状态：

0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息

1 = HAVE_METADATA - 关于音频/视频就绪的元数据

2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒

3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的

4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

（23）seekable（可查找）返回表示音频/视频可寻址部分的 TimeRanges（时间范围）对象

TimeRanges 对象表示音频/视频中用户可寻址的范围，可寻址范围指的是用户在音频/视频中可寻址（移动播放位置）的时间范围。

对于流视频，通常可以寻址到视频中的任何位置，即使其尚未完成缓冲

myVid=document.getElementById("video1");
function getFirstSeekableRange(){ 
  alert("Start: " + myVid.seekable.start(0) + " End: "  + myVid.seekable.end(0));
  }

（24）seeking（正在查找）返回用户是否正在音频/视频中进行查找，寻址中（Seeking）指的是用户在音频/视频中移动/跳跃到新的位置

布尔值：true|false----如果用户正在寻址，则为 true；否则为 false

【兼容：除了IE8及之前版本，其他浏览器均兼容】

显示出用户是否正在视频中寻址：

<script>
function isSeeking()
  { 
  myVid=document.getElementById("video1");
  document.getElementById("span1").innerHTML=("Seeking: " + myVid.seeking);
  } 
</script>
<video id="video1" controls="controls" onseeking="isSeeking()" onseeked="isSeeking()">
  <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>
<p>试着在视频中寻址：<span id="span1"></span></p>

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

【兼容：除了IE不支持外，其他浏览器均兼容】

<button onclick="changeSource()" type="button">改变视频</button>
<br />
<br />
<video id="video1" controls="controls" autoplay="autoplay">
  <source id="mp4_src" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4"
 type="video/mp4">
  <source id="ogg_src" 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("video1");
function changeSource(){ 
  isSupp=myVid.canPlayType("video/mp4");
  if (isSupp==""){
    myVid.src="movie.ogg";
  }else{
    myVid.src="movie.mp4";
  }
    myVid.load();
  } 
</script>

（26）startDate（开始日期）返回表示当前时间偏移的 Date（日期）对象，startDate 属性用于获得经由因特网的精确的音频/视频流同步

【兼容：所有浏览器均不支持】

（27）textTracks（文本轨道）返回表示可用文本轨道的 TextTrackList（文本轨道列表）对象，每条可用的文本轨道是由 TextTrack 对象表示的

【兼容：无浏览器支持】

获得可用文本轨道的数量：

myVid=document.getElementById("video1");
alert(myVid.textTracks.length);

（28）videoTracks（视频轨道）返回表示可用视频轨道的 VideoTrackList（视频轨道列表）对象

【兼容：无浏览器支持】

获得可用视频轨道的数量：

myVid=document.getElementById("video1");
alert(myVid.videoTracks.length);

（29）volume（音量）设置或返回音频/视频的音量

将视频音量设置为 20%：

<button onclick="getVolume()" type="button">音量是多少？</button>
<button onclick="setHalfVolume()" type="button">把音量设置为 0.2</button>
<button onclick="setFullVolume()" type="button">把音量设置为 1.0</button>
<br />
<br />
<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">
  Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getVolume(){ 
  alert(myVid.volume);
  } 
function setHalfVolume(){ 
  myVid.volume=0.2;
  } 
function setFullVolume(){ 
  myVid.volume=1.0;
  } 
</script>

三.【 Video/Audio（视频/音频）事件】

当音频/视频处于加载过程中时，会依次发生以下事件：

loadstart记载启动------durationchange持续时间变化------loadedmetadata加载元数据------loadeddata加载数据------progress进度------canplay可以播放------canplaythrough可以播放完毕

（1）abort（退出）当音频/视频的加载已放弃时

（2）canplay 当浏览器可以播放音频/视频时，发生 canplay 事件

【兼容：除了IE8及之前版本不支持外，其他浏览器均兼容】

myVid=document.getElementById("video1");
myVid.oncanplay=alert("Can start playing video");

在 HTML 中：

<audio|video oncanplay="SomeJavaScriptCode">

在 JavaScript 中：

audio|video.oncanplay=SomeJavaScriptCode;

使用 addEventListener()：//事件监听

audio|video.addEventListener("canplay", function()
  {
  //SomeJavaScriptCode
  }
);

（3）canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时，会发生 canplaythrough 事件

【兼容：除了IE8及之前版本不支持外，其他浏览器均兼容】

提示视频能够不停顿地一直播放：

myVid=document.getElementById("video1");
myVid.oncanplaythrough=alert("Can play through video without stopping");

（4）durationchange（时间变化）音频/视频的时长已更改时

【兼容：除了IE8及之前版本不支持外，其他浏览器均兼容】

当指定音频/视频的时长数据发生变化时，发生 durationchange 事件

当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长

myVid=document.getElementById("video1");
myVid.ondurationchange=alert("The video duration has changed");

（5）emptied（清空）当目前的播放列表为空时

（6）ended 当目前的播放列表已结束时

（7）error 当在音频/视频加载期间发生错误时

（8）loadeddata 当浏览器已加载音频/视频的当前帧时

当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件

【兼容：除了IE8及之前版本不支持外，其他浏览器均兼容】

myVid=document.getElementById("video1");
myVid.onloadeddata=alert("Browser has loaded the current frame");

（9）loadedmetadata（加载元数据）当浏览器已加载音频/视频的元数据时

【兼容：除了IE8及之前版本不支持外，其他浏览器均兼容】

当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件

音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道

myVid=document.getElementById("video1");
myVid.onloadedmetadata=alert("Meta data for video loaded");

（10）loadstart 当浏览器开始查找音频/视频时

当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时

【兼容：除了IE8及之前版本不支持外，其他浏览器均兼容】

提示音频的元数据已加载：

myVid=document.getElementById("video1");
myVid.onloadstart=alert("Starting to load video");

（11）pause 当音频/视频已暂停时

（12）play 当音频/视频已开始或不再暂停时

（13）playing 当音频/视频在已因缓冲而暂停或停止后已就绪时

（14）progress 当浏览器正在下载或加载音频/视频时，会发生进程 progress 事件

提示视频正在下载或加载中：

myVid=document.getElementById("video1");
myVid.onprogress=alert("Starting to load video");

（15）ratechange（速度变化）当音频/视频的播放速度已更改时

（16）seeked（已查找）当用户已移动/跳跃到音频/视频中的新位置时

（17）seeking（查找中）当用户开始移动/跳跃到音频/视频中的新位置时

（18）stalled（停滞）当浏览器尝试获取媒体数据，但数据不可用时

（19）suspend（暂停）当浏览器刻意不获取媒体数据时

（20）timeupdate（时间更新）当目前的播放位置已更改时

（21）volumechange（音量更改）当音量已更改时

（22）waiting 当视频由于需要缓冲下一帧而停止

猜你喜欢