首页 › 高级前端开发进阶 › html5的面试中，大概率会问到的音频和视频的那些知识点

html5的面试中，大概率会问到的音频和视频的那些知识点

🏷️ 高级前端开发进阶 ✍️ 带你一起进阶高级前端开发…… 📅 2026-03-19T02:57:34+00:00

前言

希望可以通过这篇文章，能够给你得到帮助。(感谢一键三连)

学习深入理解HTML5的audio和video。

HTML5视频概述

在HTML5*放播**一个视频，很简单，只需要一行代码：

<videosrc="resources/dadaqianduan.mp4"autoplay></video>

了解多媒体术语

了解视频文件格式：

Audio Video InterLeaved .avi

Flash Video .flv

MPEG-4 .mp4

Matroska .mkv

Ogg .ogv

音频和视频编解码器

编解码器可以理解为一些算法代码，用于处理视频，音频或者其元数据的编码格式。对音频或视频文件进行编码，可使得文件大大缩小，便于在因特网上传输。

音频编解码器：

MP3，使用ACC音频

Wav，使用Wav音频

Ogg，使用OggVorbis音频

视频编解码器：

MP4，使用H.264视频，AAC音频

WebM，使用VP8视频，OggVorbis音频

Ogg，使用Theora视频，OggVorbis音频

多媒体文件格式

audio元素支持的音频格式MP3,Wav,Ogg；video元素支持的格式MP4,WebM,Ogg。

  • audio元素是专门用于在网页中*放播**网络音频的
  • video元素是专门用于在网页中*放播**视频的

在HTML5中audio和video元素提供的接口包含了一系列的属性，方法和事件，这些接口可以帮助开发完成对音频和视频的操作。

那么如何在页面中添加音频和视频呢？

音频

<audio src="resources/audio.mp3">
</audio>

视频

<video src="resources/video.mp4" width="600" height="200">
</video>

使用source元素

因为各种浏览器对音频和视频的编解码器的支持不一样，为了能够在各种浏览器中正常使用，可以提供多个源文件。

<audio src="resources/audio.mp3">
 <source src="song.ogg" type="audio/ogg">
 <source src="song.mp3" type="audio/mpeg">
</audio>

<video src="resources/video.mp4" width="600" height="200" controls>
 <source src="movie.ogg" type="video/ogg codes=`theora,vorbis` ">
 <source src="movie.mp4" type="video/mp4">
</video>

使用source元素替代了audio或video的标签属性src。

  1. src属性用于指定媒体文件的url地址
  2. type属性用于指定媒体文件的类型，属性值为媒体文件的MIME类型，该属性值还可以通过codes参数指定编码格式

audio和video特性和属性

元素的标签特性

  1. src，源文件特性，用于指定媒体文件的url地址
  2. autoplay，自动*放播**特性，表示媒体文件加载后自动*放播**。
<videosrc="resources/video.mp4"autoplay></video>
  1. controls，控制条特性，表示为视频或音频添加自带的*放播**控制条。
<videosrc="resources/video.mp4"controls></video>
  1. loop，循环特性，表示音频或视频循环*放播**。
<videosrc="resources/video.mp4"controlsloop></video>
  1. preload，预加载特性，表示页面加载完成后如何加载视频数据。
  • none表示不进行预加载
  • metadata表示只加载媒体文件的元数据
  • auto表示加载全部视频或音频，默认值为auto 
<videosrc="resources/video.mp4"controlspreload="auto"></video>
  1. poster是video元素独有的特性，替代内容属性，用于指定一副替代图片的url地址，当视频不可以用时，会显示该替代图片。
<video src="resources/video.mp4"controls poster="images/none.jpg"</video>
  1. width和height，video元素独有的特性，用于指定视频的宽度和高度
<videosrc="resources/video.mp4"width="600"height="200"controls></video>

接口属性

  1. currentSrc，只读，获取当前正在*放播**或已加载的媒体文件的url地址
  2. videoWidth，只读，video元素特有属性，获取视频原始的宽度
  3. videoHeight，只读，video元素特有属性，获取视频原始的高度
  4. currentTime，获取或设置当前媒体*放播**位置的时间点
  5. startTime，只读，获取当前媒体*放播**的开始时间
  6. duration，只读，获取整个媒体文件的*放播**时长
  7. volume，获取或设置媒体文件*放播**时的音量，取值范围在0.0到0.1之间
  8. muted，获取或设置媒体文件*放播**时是否静音。true表示静音，false表示消除静音
  9. ended，只读，如果媒体文件已经*放播**完毕则返回true，否则返回false
  10. error，只读，读取媒体文件的错误代码
  11. played，只读，获取已*放播**媒体的TimesRanges对象，该对象内容包括已*放播**部分的开始时间和结束时间。
  12. paused，只读，如果媒体文件当前是暂停或未*放播**则返回true，否则返回false
  13. seeking，只读，获取浏览器是否正在请求媒体数据
  14. seekable，只读，获取媒体资源已请求的TimesRanges对象，该对象内容包括已请求部分的开始时间和结束时间
  15. networkState，只读，获取媒体资源的加载状态
  16. buffered，只读，获取本地缓存的媒体数据的TimesRanges对象
  17. readyState，只读，获取当前媒体*放播**的就绪状态
  18. playbackRate，获取或设置媒体当前的*放播**速率
  19. defaultPlaybackRate，获取或设置媒体默认的*放播**速率

视频*放播**的快进

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>视频*放播**时的快进</title>
<script type="text/javascript">
function Forward() {
 var el = document.getElementById("myPlayer");
 var time = el.currentTime;
 el.currentTime = time+300;
}
</script>
</head>
<body>
<video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
</video>
<br/>
<input type="button" value="快进" onclick="Forward()"/>
</body>
</html>

audio和video接口方法

接口方法

  1. load()，加载媒体文件，为*放播**做准备。
  2. play()，*放播**媒体文件。
  3. pause()，暂停*放播**媒体文件。
  4. canPlayType()，测试浏览器是否支持指定的媒体类型。

代码示例使用接口：

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>*放播**与暂停</title>
<script type="text/javascript">
var videoEl = null;
function Play() {
 videoEl.play();
}
function Pause() {
 videoEl.pause();
}
window.onload = function(){
 videoEl = document..getElementById("myPlayer");
}
</script>
</head>
<body>
<video id="myPlayer" width="600">
 <source src="resources/video.mp4" type="video/mp4">
</video><br>
<input type="button" value="*放播**" onclick="Play()"/>
<input type="button" value="暂停" onclick="Pause()"/>
</body>
</html>

audio和video事件

捕获事件的方式

捕获事件有两种方法：一种是添加事件句柄，一种是监听。

<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
</video>

// 监听方式
var videoEl = document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);

接口事件

  1. play，当执行方法play()时触发
  2. playing，正在*放播**时触发
  3. pause，当执行了方法pause()时触发
  4. timeupdate，当*放播**位置被改变时触发
  5. ended，当*放播**结束后停止*放播**时触发
  6. waiting，在等待加载下一帧时触发
  7. ratechange，在当前*放播**速率改变时触发
  8. volumechange，在音量改变时触发
  9. canplay，以当前*放播**速率需要缓冲时触发
  10. canplaythrough，以当前*放播**速率不需要缓冲时触发
  11. durationchange，当*放播**时长改变时触发
  12. loadstart，当浏览器开始在网上寻找数据时触发
  13. progress，当浏览器正在获取媒体文件时触发
  14. suspend，当浏览器暂停获取媒体文件，且文件获取并不是正常结束时触发
  15. abort，当终止获取媒体数据时触发
  16. error，在获取媒体过程中出错时触发
  17. emptied，当所在网络变为初始化状态时触发
  18. stalled，在浏览器尝试获取媒体数据失败时触发
  19. seeking，在浏览器正在请求数据时触发
  20. seeded，在浏览器停止请求数据时触发

定义全局的视频对象

代码如下：

<script type="text/javascript">
// 定义全局视频对象
var videoEl = null;
// 网页加载完毕后，读取视频对象
window.addEventListener("load", function() {
 videoEl = document.getElementById("myPlayer")
});
</script>

添加进度显示功能

代码如下：

<script type="text/javascript">
function Progress() {
 var el = document.getElementById("progress");
 el.style.width = (videoEl.currentTime/videoEl.duration)*720 + "px"
 document.getElementById("info").innerHTML = s2time(videoEl.currentTime) + "/" + s2time(videoEl.duration);
}

function s2time(s) {
 var m = parseFloat(s/60).toFixed(0);
 s = parseFloat(s%60).toFixed(0);
 return (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
}
window.addEventListener("load",function(){videoEl.addEventListener("timeupdate",Progress)});
window.addEventListener("load",Progress)

添加静音和调节音量的功能

消除静音videoEl.muted=false；静音效果videoEl.muted=true；videoEl.volume=e.value;修改音量的值。

添加慢进和快进功能

videoEl.playbackRate-=0.2;
videoEl.playbackRate-=1;
// 显示*放播**速率
document.getElementById("rate").innerHTML=fps2fps(videoEl.playbackRate);

html5的面试中，大概率会问到的音频和视频的那些知识点