H5视频音频

青春..荒唐

浏览: 979122 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

HTML

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 当视频由于需要缓冲下一帧而停止

分享到：

如何在一周之内获得GitHub stars 3500+ — ... | HTML事件属性

2018-01-26 19:38
浏览 1144
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

H5视频音频

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

H5视频音频

评论

发表评论

相关推荐

浅谈锚点跳转优先级

浅谈HTML空标签

浅谈空标签对伪元素的支持

浅谈HTML空标签

HTML中form表单作用解释

table表格标签总结

html链接中的相对路径和绝对路径

Unicode编码详解

H5本地存储

XML笔录

SVG详解

H5详解

HTML文本格式化

URL与URI区别

HTTP方法与协议

HTTP请求与状态码

URL编码来源及详解

HTML字符集

HTML 颜色代码理论

HTML文档类型

最近访客更多访客>>