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

言

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

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

HTML5视频概述

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

<video src="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。

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

audio和video特性和属性

元素的标签特性

src，源文件特性，用于指定媒体文件的url地址
autoplay，自动播放特性，表示媒体文件加载后自动播放。

<video src="resources/video.mp4" autoplay></video>

controls，控制条特性，表示为视频或音频添加自带的播放控制条。

<video src="resources/video.mp4" controls></video>

loop，循环特性，表示音频或视频循环播放。

<video src="resources/video.mp4" controls loop></video>

preload，预加载特性，表示页面加载完成后如何加载视频数据。

none表示不进行预加载
metadata表示只加载媒体文件的元数据
auto表示加载全部视频或音频，默认值为auto

<video src="resources/video.mp4" controls preload="auto"></video>

poster是video元素独有的特性，替代内容属性，用于指定一副替代图片的url地址，当视频不可以用时，会显示该替代图片。

<video src="resources/video.mp4" controls poster="images/none.jpg"</video>

width和height，video元素独有的特性，用于指定视频的宽度和高度

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

接口属性

currentSrc，只读，获取当前正在播放或已加载的媒体文件的url地址
videoWidth，只读，video元素特有属性，获取视频原始的宽度
videoHeight，只读，video元素特有属性，获取视频原始的高度
currentTime，获取或设置当前媒体播放位置的时间点
startTime，只读，获取当前媒体播放的开始时间
duration，只读，获取整个媒体文件的播放时长
volume，获取或设置媒体文件播放时的音量，取值范围在0.0到0.1之间
muted，获取或设置媒体文件播放时是否静音。true表示静音，false表示消除静音
ended，只读，如果媒体文件已经播放完毕则返回true，否则返回false
error，只读，读取媒体文件的错误代码
played，只读，获取已播放媒体的TimesRanges对象，该对象内容包括已播放部分的开始时间和结束时间。
paused，只读，如果媒体文件当前是暂停或未播放则返回true，否则返回false
seeking，只读，获取浏览器是否正在请求媒体数据
seekable，只读，获取媒体资源已请求的TimesRanges对象，该对象内容包括已请求部分的开始时间和结束时间
networkState，只读，获取媒体资源的加载状态
buffered，只读，获取本地缓存的媒体数据的TimesRanges对象
readyState，只读，获取当前媒体播放的就绪状态
playbackRate，获取或设置媒体当前的播放速率
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接口方法

接口方法

load()，加载媒体文件，为播放做准备。
play()，播放媒体文件。
pause()，暂停播放媒体文件。
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);

接口事件

play，当执行方法play()时触发
playing，正在播放时触发
pause，当执行了方法pause()时触发
timeupdate，当播放位置被改变时触发
ended，当播放结束后停止播放时触发
waiting，在等待加载下一帧时触发
ratechange，在当前播放速率改变时触发
volumechange，在音量改变时触发
canplay，以当前播放速率需要缓冲时触发
canplaythrough，以当前播放速率不需要缓冲时触发
durationchange，当播放时长改变时触发
loadstart，当浏览器开始在网上寻找数据时触发
progress，当浏览器正在获取媒体文件时触发
suspend，当浏览器暂停获取媒体文件，且文件获取并不是正常结束时触发
abort，当终止获取媒体数据时触发
error，在获取媒体过程中出错时触发
emptied，当所在网络变为初始化状态时触发
stalled，在浏览器尝试获取媒体数据失败时触发
seeking，在浏览器正在请求数据时触发
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;修改音量的值。

添加慢进和快进功能

多站点都会使用到视频. HTML5 提供了展示视频的标准。

检测您的浏览器是否支持 HTML5 视频：

检测

Web站点上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

HTML5 (视频)- 如何工作

如需在 HTML5 中显示视频，您所有需要的是：

实例

您的浏览器不支持Video标签。

</video>

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

视频格式与浏览器的支持

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - 使用 DOM 进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

实例 1

为视频创建简单的播放/暂停以及调整尺寸控件：

播放/暂停放大缩小普通

上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

HTML5 Video 标签

标签	描述
<video>	定义一个视频
<source>	定义多种媒体资源,比如 <video> 和<audio>
<track>	定义在媒体播放器文本轨迹

5 让我们的 Web 交互更加生动有趣，但浏览器的多样性以及挥之不去的兼容问题，却阻碍了技术发展。这并不是我们拒绝的理由，恰恰相反，它应该成为动力。

一、语音场景

文章标题为了严谨，所以叫音频合成。如果用大白话来解释，那就是「文字转语音」。语音的场景就太多了：

点读机：哪里不会点哪里
有声小说：看着太累，听起来不错
Web 页面警示用户的操作
闹钟，提醒，小秘书
残疾人支持

这些都是随处可见的例子，但真正燃起我激情的是这个场景，简直酷炫到爆。

原来动画和语音结合起来才是最佳的用户体验。

二、技术核心

看完上面的动画，按捺不住内心的好奇，随手就翻起了源码。Oh～原来如此，把你揪出来：

let sayhello = new window.SpeechSynthesisUtterance('你好，欢迎来到 Jartto 的博客！');
window.speechSynthesis.speak(sayhello);

事情的真相就是简单如此，短短两行，就实现了语音播报。

三、兼容性

如此有趣的 API，突然想到了一万个应用场景。别忙，先来看看 SpeechSynthesis 的兼容性吧：

看起来各大浏览器支持的还不错，那就试试呗！

四、API 文档

SpeechSynthesis 接口是语音服务的控制接口，属于网页语音 API，它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。

既然浏览器已经普遍支持了，那么我们不妨打印出来看看。

下面我们来适当的解释一下：

SpeechSynthesis.paused: 当 SpeechSynthesis 处于暂停状态时， Boolean 值返回 true 。
SpeechSynthesis.pending: 当语音播放队列到目前为止保持没有说完的语音时， Boolean值返回 true 。
SpeechSynthesis.speaking: 当语音谈话正在进行的时候，即使 SpeechSynthesis 处于暂停状态， Boolean 返回 true 。
SpeechSynthesis.onvoiceschanged: 当由 SpeechSynthesis.getVoices() 方法返回的SpeechSynthesisVoice 列表改变时触发。

此外，还有几个非常实用的方法：

SpeechSynthesis.cancel(): 移除所有语音谈话队列中的谈话。
SpeechSynthesis.getVoices(): 返回当前设备所有可用声音的 SpeechSynthesisVoice 列表。
SpeechSynthesis.pause(): 把 SpeechSynthesis 对象置为暂停状态。
SpeechSynthesis.resume(): 把 SpeechSynthesis 对象置为一个非暂停状态：如果已经暂停了则继续。
SpeechSynthesis.speak(): 添加一个 utterance 到语音谈话队列；它将会在其他语音谈话播放完之后播放。

API 很简单，这里就不赘述了，来个例子尝尝鲜。

五、代码演示

MDN Web Docs上面有个很形象的例子，我们拿过来学习学习：

注意：这里为了演示，只列出了核心代码，完整代码请看下面「完整示例」。

六、补充：SpeechRecognition

既然提到了文字转语音，那么不得不提到语音识别。

SpeechRecognition 顾名思义，语音识别，属于网页语音 API。需要麦克风等音频输入设备的支持，可以识别用户的语音输入，并且转化成文字。

SpeechRecognition API 需要硬件支持，所以兼容性并不好，大致如下：

七、未来畅想

相信不久的未来，浏览器会逐步统一，兼容问题将会化为乌有。你看，微软不也低下了高贵的头颅，投入了谷歌的怀抱。

我们将会用更多的时间去探索技术，而不是去兼容老破旧的网站或者机器。当然，Web 技术会大行其道，用户将会拥有到更加有趣的体验。

在线咨询

上一篇：前端select中option跳转问题
下一篇：如何来使用Html中的锚点连接

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商