audio/video在加载过程会依次触发的事件：
-
loadstart
刚开始加载audio/video的时候,触发该事件 -
durationchange
当开始加载后时长(duration)更改的时候，触发该事件。
duration会从NaN变为实际的数值 -
loadedmetadata
元数据(metadata)加载完成的时候，触发该事件
audio/video的元数据包括 时长（duration), 大小(仅video有),文本轨道
想获取视频的相关信息，该节点(加载完成metadata)就能取到。并不需所有帧都loaded。
audio/video 在加载过程中，会先加载元数据metadata -
loadeddata
当前帧加载完成，但是没有加载完成下一帧的时候，触发该事件。
并不是所有帧都加载完成才执行。 -
progress
加载(是指刚开始加载，或者更改进度条导致加载)audio/video的时候,触发该事件。 -
canplay
当audio/video缓冲足够，可以开始播放play的时候，触发该事件。 -
canplaythrough
当audio/video不需要停下来缓冲，就能播放play through的时候，触发该事件。
<html>
<body>
<video id="myVideo" width="320" height="176" controls>
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
vid.onloadeddata = () => {
alert('loadeddata')
}
vid.onloadedmetadata = () => {
alert('loadedmetadata')
}
vid.ondurationchange = function() {
alert("The video duration has changed");
};
vid.oncanplaythrough = function() {
alert("Can play through video without stopping");
};
vid.onloadstart = function() {
alert("Starting to load video");
};
vid.onprogress = function() {
alert("Downloading video");
};
vid.oncanplay = function() {
alert("Can start playing video");
};
</script>
<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
audio/video所有的的事件:
| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时触发。 |
| canplay | 当浏览器可以开始播放音频/视频时触发。 |
| canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
| durationchange | 当音频/视频的时长已更改时触发。 |
| emptied | 当目前的播放列表为空时触发。 |
| ended | 当目前的播放列表已结束时触发。 |
| error | 当在音频/视频加载期间发生错误时触发。 |
| loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
| loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
| loadstart | 当浏览器开始查找音频/视频时触发。 |
| pause | 当音频/视频已暂停时触发。 |
| play | 当音频/视频已开始或不再暂停时触发。 |
| playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
| progress | 当浏览器正在下载音频/视频时触发。 |
| ratechange | 当音频/视频的播放速度已更改时触发。 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时触发。 |
| suspend | 当浏览器刻意不获取媒体数据时触发。 |
| timeupdate | 当目前的播放位置已更改时触发。 |
| volumechange | 当音量已更改时触发。 |
| waiting | 当视频由于需要缓冲下一帧而停止时触发。 |
