企业官网建设流程全解析

1. web中的音频和视频

最早的在线视频和音频的流行得益于专有的基于插件的技术，如Flash和Silverlight。这两种技术存在安全性和无障碍问题，现已过时，取而代之的是原生的HTML解决方案，该解决方案包括<video>和<audio>元素以及用于控制它们的JavaScript API。

1.1 <video>元素

可以借助<video>元素来轻松地嵌入视频。

<videosrc="rabbit320.webm"controls><p>你的浏览器不支持 HTML 视频。可点击<ahref="rabbit320.mp4">此链接</a>观看。</p></video>

值得注意的特性有：
src：同<img>元素的使用方式相同，src属性指向你想要嵌入到网页中的视频资源，它们的运作方式完全相同。
controls：用户应当能够控制视频和音频的播放。你必须使用controls属性来让视频或音频包含浏览器自带的控制界面，或者使用适当的JavaScript API构建自己的界面。至少，界面必须包括启动和停止媒体以及调整音量的方法。
<video>元素内的段落：这个叫做后备内容，当浏览器不支持<video>元素的时候，就会显示这段内容，借此我们能够对旧的浏览器提供回退。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。

1.2 使用多个播放源以提高兼容性

以上的例子中有一个问题，那就是不同浏览器对视频/音频格式的支持程度不一样，导致你可能无法播放某些视频/音频。幸运的是，你有办法防止这个问题发生。

1.2.1 媒体文件的内容

像MP3、MP4还有WebM这些格式叫做容器格式。它们定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及使用什么编解码器对其通道进行编码等等。
一个包含电影的WebM文件，其主要包括一个主视频轨道和一个备用视角轨道，以及相应的英语和西班牙语音轨，还有英语解说音轨。文件还包括用于电影的闭路字幕文本轨道、西班牙语字幕以及解说的英文字幕。
容器中的音频和视频轨道存储着按照相应编解码器格式编码的数据。音频轨道使用不同于视频轨道的格式进行编码。每条音频轨道都采用音频编解码器编码，而视频轨道则使用视频编解码器编码。不同浏览器支持不同的视频和音频格式，以及不同的容器格式，这些容器可以包含不同类型的视频和音频。
WebM容器通常包括了Vorbis或Opus音频和VP8/VP9视频。这在所有的现代浏览器中都支持，除了某些老版本浏览器。
MP4容器通常包括AAC或MP3音频和H.264视频。这在所有浏览器中都支持。
Ogg容器倾向于使用Vorbis音频和Theora视频。其在Firefox和Chrome当中受到完美的支持，不过这个容器已经被更强大的WebM格式所取代。
对于某些类型的音频，通常编解码器的数据存储没有容器或简化容器。FLAC编解码器，它通常存储在FLAC文件中，FLAC文件只是FLAC的原始轨迹。
"MP3"文件实际上是存储在MPEG或MPEG-2容器中的MPEG-1音频层III音频轨道。因为尽管大多数浏览器不支持在<video>和<audio>元素中使用MPEG媒体，但由于MP3的流行，它们可能仍然支持MP3。
音频播放器倾向于直接播放音频，例如MP3和Ogg文件。它们不需要容器。

1.2.2 浏览器所支持的媒体文件

编解码器主要用于将音频和视频压缩成可管理的文件。浏览器支持多种编解码器，它们用于已压缩的音视频与二进制数据的相互转换。不同的编解码器和不同的容器都有各自的优缺点，这会影响你做出选择。
由于每种浏览器支持的容器文件格式和编解码器都有所不同，情况变得更加复杂。为了尽可能确保你的网站或应用能在用户的浏览器上正常工作，你可能需要提供多种格式的媒体文件。如果你的网站没有提供任何用户的浏览器支持的格式，那么你的媒体内容将无法播放。
由于确保你的应用程序中的媒体内容能在你想要覆盖的每一种浏览器、平台和设备上都正常显示有些复杂，因此选择最合适的编解码器和容器组合可能会是一项挑战。
移动浏览器和桌面浏览器对格式的支持可能不一样。此外，桌面和移动浏览器都可能外包媒体播放处理。因此，媒体支持在一定程度上依赖于用户安装了哪些软件。

<videocontrols><sourcesrc="rabbit320.mp4"type="video/mp4"/><sourcesrc="rabbit320.webm"type="video/webm"/><p>你的浏览器不支持此视频。可点击<ahref="rabbit320.mp4">此链接</a>观看</p></video>

在这里我们将src属性从<video>元素中移除，转而将它放在几个单独的<source>元素当中，这些元素分别指向各自的资源。在本例当中，浏览器会检查<source>元素，并且播放第一个与其自身codec相匹配的媒体。WebM和MP4这两种格式在目前已经足够，只要视频支持这两种格式，那么其在大多数平台和浏览器上都能正常播放。
每个<source>元素都含有type属性，这个属性是可选的，但是建议你添加这个属性——它包含了<source>指定的MIME类型，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果没有添加type属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但是这样会消耗掉大量的时间和资源。

1.3 其他<video>特性

<videocontrolswidth="400"height="400"autoplayloopmutedpreload="auto"poster="poster.png"><sourcesrc="rabbit320.mp4"type="video/mp4"/><sourcesrc="rabbit320.webm"type="video/webm"/><p>你的浏览器不支持此视频。可点击<ahref="rabbit320.mp4">此链接</a>观看</p></video>

width和height：你可以用属性控制视频的尺寸，也可以用CSS来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比——也叫做横纵比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。
autoplay：这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要在你的网站上自动播放视频或音频，因为用户可能会反感。
loop：这个属性可以让视频或者音频文件在结束时再次开始播放。这个也可能会恼人，同样不建议使用，除非有必要。
muted：这个属性会导致媒体播放时，默认关闭声音。
poster：这个属性指向一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
preload：这个属性被用来缓冲较大的文件，有三个值可选：
“none”：不缓冲文件。
“auto”：页面加载后缓存媒体文件。
“metadata”：仅缓冲文件的元数据。

1.4 <audio>元素

<audio>元素与<video>元素的使用方式几乎完全相同，只有一些细微的差别，比如下面的边框不同，一个典型的例子如下：

<audiocontrols><sourcesrc="viper.mp3"type="audio/mp3"/><sourcesrc="viper.ogg"type="audio/ogg"/><p>你的浏览器不支持此音频，可点击<ahref="viper.mp3">此链接</a>收听。</p></audio>

因为音频播放器没有视觉部件，它所占用的空间比视频播放器要小。其他一些HTML<audio>和<video>的差异如下：
<audio>元素不支持width/height属性——由于其并没有视觉部件，也就没有内容要设置width/height。
它同时也不支持poster属性——同样，因为没有视觉部件。
除此之外，<audio>元素支持所有<video>元素的特性。

2. 显示视频文本

许多人不想听到Web上的音频/视频内容，至少在某些情况下是这样的，比如：
许多人患有听觉障碍，他们不能听见音频中的声音。
还有一些人无法听音频，因为他们在一个非常嘈杂的环境当中。
在某些环境下播放音频会分散注意力或造成干扰，这种情况下，拥有字幕就显得非常实用了。
有一些人他们不会说视频当中的语言，因此他们需要文字记录或者是翻译来帮助他们理解媒体内容。
为这些人提供音频/视频中话语的文字记录，将会对他们有很大的帮助。幸运的是，借助HTML视频，我们可以做到这一点。我们只需使用WebVTT文件格式和<track>元素即可。
WebVTT是一个格式，用来编写文本文件，这个文本文件中包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做cue，你可以根据不同的需求来显示不同类型的cue，最常见的如下：
subtitles：外语材料的翻译字幕，来帮助那些听不懂音频中说的什么的人理解音频当中的内容。
captions：同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人理解音频中的内容。
定时描述：由媒体播放器朗读的文本，其向盲人或其他视力受损用户描述重要的视觉内容。
一个典型的WebVTT文件如下：

1 00:00:22.230 ---> 00:00:24.606 第一段字幕 2 00:00:30.739 ---> 00:00:34.074 第二段字幕 ...

要让其与HTML媒体一起显示，你需要做如下工作：
1. 将其保存为.vtt文件，放在服务器可以提供服务的地方，例如和HTML文件放在同一文件夹。
2. 用<track>标签链接.vtt文件，<track>标签需放在<audio>或<video>标签当中，同时需要放在所有<source>标签之后。使用kind属性来指明是subtitles、captions还是descriptions。然后，使用srclang来告诉浏览器你是用什么语言来编写的subtitles。最后，添加label，以帮助读者在查找时识别语言。

<videocontrols><sourcesrc="example.mp4"type="video/mp4"/><sourcesrc="example.webm"type="video/webm"/><trackkind="subtitles"src="subtitles_es.vtt"srclang="es"label="Spanish"/></video>

参考

1、视频和音频内容