参考：视频和音频内容
既然我们很乐意将简单的图像添加到网页，那么下一步就是开始在HTML文档中添加视频和音频播放器！在本文中，我们将着眼于使用<video>和<audio>元素; 然后，我们将通过查看如何为您的视频添加字幕/翻译字幕来结束。
1、网络上的音频和视频编辑
自从21世纪初开始，我们开始拥有足够快的带宽以支持任何类型的视频（视频文件比文本甚至图像大得多）时，Web开发人员希望在Web上使用视频和音频很长一段时间。在早期，HTML等本机Web技术无法在Web上嵌入视频和音频，因此Flash（以及后来的Silverlight）等专有（或基于插件）技术在处理此类内容时变得流行。这种技术运行正常，但它存在许多问题，包括不能很好地处理HTML / CSS功能，安全问题和可访问性问题。
如果做得好，原生解决方案可以解决大部分问题。幸运的是，几年后，HTML5规范增加了这些功能，包括<video>和<audio>元素，以及一些用于控制它们的闪亮的新JavaScript API。我们不会在这里看到JavaScript - 只是可以通过HTML实现的基本基础。
我们为您提供了样本音频和视频文件以及您自己实验的示例代码，以防您无法掌握自己的实验。
注意：在开始之前，您还应该知道有很多OVP（在线视频提供商），如YouTube，Dailymotion和Vimeo，以及Soundcloud等在线音频提供商。这些公司提供了一种方便，轻松的方式来托管和使用视频，因此您不必担心大量的带宽消耗。OVP甚至通常提供现成的代码，用于在您的网页中嵌入视频/音频。如果你走这条路，你可以避免我们在本文中讨论的一些困难。我们将在下一篇文章中讨论这种服务。
1.1 <video>元素
该<video>元素可让您轻松嵌入视频。一个非常简单的示例如下所示：
1 <video src="rabbit320.webm" controls> 2 <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 3 </video>
举例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Images in HTML</title> 6 </head> 7 <body> 8 9 <h1>Below is a simple video example</h1> 10 11 <video src="rabbit320.webm" controls> 12 <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 13 </video> 14 15 </body> 16 </html>
注意的特点是：
src
与<img>元素相同，src（source）属性包含要嵌入的视频的路径。它以完全相同的方式工作。
controls
用户必须能够控制视频和音频播放（这对于患有癫痫症的人来说尤其重要 。）您必须使用该controls属性来包含浏览器自己的控制界面，或者使用适当的JavaScript API构建您的界面。至少，界面必须包括启动和停止媒体以及调整音量的方法。
<video>标签内的段落
这称为后备内容 - 如果访问该页面的浏览器不支持该<video>元素，则会显示该内容，从而允许我们为旧版浏览器提供后备。这可以是你喜欢的任何东西; 在这种情况下，我们提供了直接链接到视频文件，因此无论用户使用什么浏览器，用户都可以至少以某种方式访问它。
嵌入的视频看起来像这样：
1.2 支持多种格式
以上示例存在问题，如果您尝试使用Safari或Internet Explorer等浏览器访问上面的实时链接，则可能已经注意到了这一问题。该视频无法播放！这是因为不同的浏览器支持不同的视频（和音频）格式。
让我们快速浏览一下术语。MP3，MP4和WebM等格式称为容器格式。它们包含构成整首歌曲或视频的不同部分 - 例如音频轨道，视频轨道（在视频的情况下），以及描述所呈现媒体的元数据。
音频和视频轨道也采用不同的格式，例如：
WebM容器通常将Ogg Vorbis音频与VP8 / VP9视频打包在一起。主要在Firefox和Chrome中支持此功能。
MP4容器通常使用H.264视频打包AAC或MP3音频。这主要在Internet Explorer和Safari中受支持。
较旧的Ogg容器倾向于使用Ogg Vorbis音频和Ogg Theora视频。这主要在Firefox和Chrome中得到支持，但基本上已被更优质的WebM格式所取代。
音频播放器将倾向于直接播放音轨，例如MP3或Ogg文件。这些不需要容器。
注意：从我们的音频 - 视频编解码器兼容性表中可以看出，它并不那么简单。此外，许多移动平台浏览器可以通过将其交给底层系统的媒体播放器来播放不受支持的格式。但是现在这样做。
存在上述格式以将视频和音频压缩成可管理的文件（原始视频和音频非常大）。浏览器包含不同的编解码器，如Vorbis或H.264，用于将压缩的声音和视频转换为二进制数字并返回。如上所述，遗憾的是浏览器并不都支持相同的编解码器，因此您必须为每个媒体制作提供多个文件。如果你错过了解码媒体的正确编解码器，它将无法播放。
注意：您可能想知道为什么会出现这种情况。MP3（用于音频）和MP4 / H.264（用于视频）都得到广泛支持，并且质量很好。然而，他们也受到专利保护 - 美国专利至少涵盖了2017年的MP3，直到2027年的H.264，这意味着没有专利的浏览器必须支付巨额资金来支持这些格式。此外，许多人原则上避免使用受限软件，而采用开放格式。这就是我们必须为不同浏览器提供多种格式的原因。
举例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Images in HTML</title> 6 </head> 7 <body> 8 9 <h1>Below is a simple video example</h1> 10 11 <video controls> 12 <source src="rabbit320.mp4" type="video/mp4"> 13 <source src="rabbit320.webm" type="video/webm"> 14 <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> 15 </video> 16 17 </body> 18 </html>
在这里，我们src从实际<video>标签中取出了该属性，而是包含<source>指向其自身来源的单独元素。在这种情况下，浏览器将浏览<source>元素并播放第一个支持编解码器的元素。如今，包括WebM和MP4源应足以在大多数平台和浏览器上播放您的视频。
每个<source>元素也有一个type属性。这是可选的，但建议您包含它们 - 它们包含视频文件的MIME类型，浏览器可以阅读这些并立即跳过他们不理解的视频。如果不包含它们，浏览器将加载并尝试播放每个文件，直到找到有效的文件，从而占用更多时间和资源。
注意：我们关于支持的媒体格式的文章包含一些常见的MIME类型。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Extra video features example</title> 6 <style> 7 video { 8 background: black; 9 } 10 </style> 11 </head> 12 <body> 13 14 <h1>Extra video features example</h1> 15 16 <video controls width="400" height="400" 17 loop muted preload="auto" 18 poster="poster.png"> 19 <source src="rabbit320.mp4" type="video/mp4"> 20 <source src="rabbit320.webm" type="video/webm"> 21 <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> 22 </video> 23 24 </body> 25 </html>
新功能包括：
width 和 height
您可以使用这些属性或使用CSS控制视频大小。在这两种情况下，视频都保持其原生的宽高比 - 称为宽高比。如果纵横比不是由您设置的尺寸维持的，则视频将增长以水平填充空间，默认情况下，未填充的空间将仅获得纯色背景。
autoplay
此属性使音频或视频在页面的其余部分加载时立即开始播放。建议您不要在您的网站上使用自动播放视频（或音频），因为用户会发现它真的很烦人。
loop
此属性使视频（或音频）在完成后再次开始播放。这也可能很烦人，所以只有在必要时才使用。
muted
此属性会在默认情况下关闭声音的情况下播放媒体。
poster
此属性将图像的URL作为其值，该图像将在播放视频之前显示。它旨在用于启动或广告屏幕。
preload
此属性用于缓冲大文件的元素中。它可以采用3个值中的一个：
- "none" 不缓冲文件
- "auto" 缓冲媒体文件
- "metadata" 仅缓冲文件的元数据
你可以找到上面的例子，可以在Github上播放（也可以参见源代码。）请注意，我们没有autoplay在实时版本中包含该属性 - 如果视频在页面加载后立即开始播放，那么你就不要去看海报吧！
1.3 <audio>元素
该<audio>元件在工作方式完全相同的<video>元素，有一些小的差异概述如下。一个典型的例子可能如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Extra audio features example</title> 6 <style> 7 video { 8 background: black; 9 } 10 </style> 11 </head> 12 <body> 13 14 <h1>Extra audio features example</h1> 15 16 <audio controls> 17 <source src="viper.mp3" type="audio/mp3"> 18 <source src="viper.ogg" type="audio/ogg"> 19 <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> 20 </audio> 21 22 </body> 23 </html>
输出结果：
这比视频播放器占用的空间更少，因为没有可视组件 - 您只需要显示控件来播放音频。与HTML5视频的其他不同之处如下：
该<audio>元素不支持width/ heightattributes - 同样，没有可视组件，因此没有任何内容可以指定宽度或高度。
它也不支持该poster属性 - 同样，不支持可视组件。
除此之外，<audio>支持所有相同的功能<video>- 查看上述部分以获取有关它们的更多信息。
1.4 重新启动媒体播放
可以随时将媒体重置为开头 - 包括选择最佳媒体源的过程，如果使用<source>元素指定了多个媒体源- 通过调用元素的load()方法：
1 var mediaElem = document.getElementById("my-media-element"); 2 mediaElem.load();
1.5 检测轨道的添加和删除
可以监视媒体元素中的曲目列表，以检测何时向元素的媒体添加或删除曲目。例如，您可以观察将音频曲目添加到媒体时addtrack要发送的事件HTMLMediaElement.audioTrackList。
1 var mediaElem = document.querySelector("video"); 2 mediaElem.audioTracks.onaddtrack = function(event) { 3 audioTrackAdded(event.track); 4 }
可以在TrackEvent文档中找到有关此内容的更多信息。