HTML5——视频/音频加载过程中发生的事件_前端视频加载过程做了什么事

作者：知新_RL | 2024-03-02 01:30:31

踩

前端视频加载过程做了什么事

HTML5视频/音频加载过程中会依次触发如下事件：

1. loadstart; 2. durationchange;

3. loadedmetadata; 4. loadeddata;

5. progress; 6. canplay; 7. canplaythrough

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

2. 当指定音频/视频的时长数据发生变化时，会发生 durationchange 事件。当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。

3. 音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。

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

5. 当浏览器正在下载指定的音频/视频时，会发生 progress 事件。

6. 当浏览器能够开始播放指定的音频/视频时，会发生 canplay 事件。

7. 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。

求路过的大神指点：

代码1：


<!DOCTYPE html> <!-- 代码1 -->
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
myVid=document.getElementById("video1");
myVid.onduratiοnchange=alert("The video duration has changed");
myVid.onloadedmetadata=alert("Meta data for video loaded");
myVid.onduratiοnchange=alert("The video duration has changed");
myVid.οnlοadstart=alert("loadstart");
myVid.onduratiοnchange=alert("The video duration has changed");
myVid.onloadedmetadata=alert("Meta data for video loaded");
</script> 
</head>
<body> 
 
<video id="video1" controls="controls" loop>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video  标签。
</video>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
 
</body> 
</html>

代码2：


<!DOCTYPE html>  <!-- 代码2 -->
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body> 
 
<video id="video1" controls="controls" loop>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video  标签。
</video>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
 
<script>
myVid=document.getElementById("video1");
myVid.onduratiοnchange=alert("The video duration has changed");
myVid.onloadedmetadata=alert("Meta data for video loaded");
myVid.onduratiοnchange=alert("The video duration has changed");
myVid.οnlοadstart=alert("loadstart");
myVid.onduratiοnchange=alert("The video duration has changed");
myVid.onloadedmetadata=alert("Meta data for video loaded");
</script> 
</body> 
</html>

上述两段代码执行结果不一样，代码1只弹出一个提示框，提示信息为“The video duration has changed”；而代码2依次弹出6个提示框，提示信息依次为："The video duration has changed"，"Meta data for video loaded"，"The video duration has changed"，"loadstart"， "The video duration has changed"， "Meta data for video loaded"。

为什么呢？跟什么有关系？

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/178205