Video and audio content

 

既然我们已经可以在网页上添加简单的图像了,那么下一步就是开始将视频和音频播放器添加到HTML文档中! 在本文中,我们将研究使用<video><audio>元素来完成此操作. 然后,我们将介绍如何在视频中添加字幕/字幕.

Prerequisites: 基本的计算机知识, 安装的基本软件使用文件的基本知识,熟悉HTML基础知识(如HTML入门中所述 )和HTML中的图像 .
Objective: 了解如何将视频和音频内容嵌入到网页中,以及如何在视频中添加字幕.

Video and audio on the web

自2000年代初以来,Web开发人员就一直想在Web上使用视频和音频很长时间,那时我们开始拥有足够快的带宽来支持任何类型的视频(视频文件比文本甚至图像大得多).在早期,诸如HTML之类的本地Web技术无法将视频和音频嵌入到Web中,因此诸如Flash (后来称为Silverlight )之类的专有(或基于插件的)技术开始流行用于处理此类内容. 这种技术行之有效,但存在许多问题,包括与HTML / CSS功能的配合不良,安全性问题和可访问性问题.

A native solution would solve much of this if implemented correctly. Fortunately, a few years later the HTML5 specification had such features added, with the <video> and <audio> elements, and some shiny new JavaScript APIs for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

我们不会教您如何制作音频和视频文件-这需要完全不同的技能. 如果您无法自己使用,我们已为您提供了示例音频和视频文件以及示例代码,供您自己进行实验.

注意 :在这里开始之前,您还应该知道有很多OVP(在线视频提供商),例如YouTubeDailymotionVimeo ,以及在线音频提供商,例如Soundcloud . 这样的公司提供了一种方便,轻松的方式来托管和使用视频,因此您不必担心带宽消耗巨大. OVP甚至通常会提供现成的代码以将视频/音频嵌入到您的网页中. 如果使用该路线,则可以避免我们在本文中讨论的一些困难. 在下一篇文章中,我们将讨论这种服务.

The <video> element

<video>元素使您可以非常轻松地嵌入视频. 一个非常简单的示例如下所示:

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

注释的特征是:

src
<img>元素相同, src (源)属性包含要嵌入的视频的路径. 它的工作原理完全相同.
controls
用户必须能够控制视频和音频的播放(这对于患有癫痫病的人尤其重要.)您必须使用controls属性来包含浏览器自己的控件界面,或者使用适当的JavaScript API构建您的界面. 界面至少应包括一种启动和停止媒体以及调节音量的方法.
The paragraph inside the <video> tags
这称为备用内容 -如果访问该页面的浏览器不支持<video>元素,则会显示该内容,从而使我们可以为较旧的浏览器提供备用内容. 这可以是您喜欢的任何东西; 在这种情况下,我们提供了到视频文件的直接链接,因此无论用户使用什么浏览器,用户都至少可以某种方式访问​​它.

嵌入式视频将如下所示:

A simple video player showing a video of a small white rabbit

您可以此处尝试运行示例 (另请参见源代码 .)

Using multiple source formats to improve compatibility

上面的示例存在问题,如果您尝试使用较旧的浏览器(例如Internet Explorer或什至是Safari的较旧版本)访问上面的实时链接,您可能已经注意到了. 视频无法播放,因为不同的浏览器支持不同的视频(和音频)格式. 幸运的是,您可以采取一些措施来防止此问题的发生.

Contents of a media file

首先,让我们快速浏览一下术语. 诸如MP3,MP4和WebM之类的格式称为容器格式 . 它们定义了一种结构,在该结构中存储了构成媒体的每个音频和/或视频轨道,以及描述媒体的元数据,使用什么编解码器对其频道进行编码等.

可以将包含以下内容的WebM文件概念化:一个包含电影的电影,该电影具有一个主视频轨道和一个备用角度轨道,以及英语和西班牙语的音频,以及英语解说轨道的音频,如下图所示. 还包括文本轨道,其中包含故事片的隐藏字幕,电影的西班牙语字幕和评论的英语字幕.

Diagram conceptualizing the contents of a media file at the track level.

容器内的音频和视频轨道以用于编码该媒体的编解码器的适当格式保存数据. 音频轨道和视频轨道使用不同的格式. 每个音频轨道均使用音频编解码器进行编码 ,而视频轨道则使用(如您可能已经猜到的) 视频编解码器进行编码 .

例如:

  • WebM容器通常将Vorbis或Opus音频与VP8 / VP9视频打包在一起. 尽管较旧的版本可能无法使用,但所有现代浏览器均支持此功能.
  • MP4容器通常将AAC或MP3音频与H.264视频打包在一起. 所有现代浏览器以及Internet Explorer也都支持此功能.
  • Ogg容器倾向于使用Vorbis音频和Theora视频. Firefox和Chrome最好地支持此功能,但是基本上已经被质量更好的WebM格式所取代.

有一些特殊情况. 例如,对于某些类型的音频,编解码器的数据通常在没有容器或简化容器的情况下存储. FLAC编解码器就是这样一种实例,它最常见地存储在FLAC文件中,而FLAC文件只是原始FLAC轨道.

另一个此类情况是总是受欢迎的MP3文件. " MP3文件"实际上是存储在MPEG或MPEG-2容器中的MPEG-1音频层III(MP3)音轨. 这特别有趣,因为尽管大多数浏览器不支持在<video><audio>元素中使用MPEG媒体,但由于其受欢迎程度,它们可能仍支持MP3.

音频播放器倾向于直接播放音频轨道,例如MP3或Ogg文件. 这些不需要容器.

Media file support in browsers

为什么会有这个问题? 事实证明,几种流行的格式(例如MP3和MP4 / H.264)非常出色,但受到专利的限制. 也就是说,有一些专利涵盖了其所基于的部分或全部技术. 在美国,直到2017年,MP3才拥有专利,而H.264至少要到2027年才会受到专利的限制.

由于拥有这些专利,希望实现对这些编解码器的支持的浏览器通常必须支付巨额许可费用. 另外,有些人只是喜欢避免使用受限制的软件,而是只使用开放格式. 由于这些法律和优先原因,Web开发人员发现自己必须支持多种格式才能吸引整个受众.

上一节中描述的编解码器可以将视频和音频压缩为可管理的文件,因为原始音频和视频都非常大. 每个网络浏览器都支持多种编解码器 ,例如Vorbis或H.264,可用于将压缩的音频和视频转换为二进制数据并返回. 每个编解码器都有自己的优缺点,每个容器也可能提供自己的积极和消极特性,从而影响您对使用哪种软件的决策.

事情变得稍微复杂一点,因为每个浏览器不仅支持不同的容器文件格式集,而且还支持不同的编解码器选择. 为了最大程度地提高您的网站或应用程序在用户浏览器上运行的可能性,您可能需要提供使用多种格式的每个媒体文件. 如果您的网站和用户的浏览器不共享相同的媒体格式,则您的媒体将无法播放.

由于要确保在您希望访问的浏览器,平台和设备的每种组合中都可以查看应用程序媒体的复杂性,因此选择最佳的编解码器和容器组合可能是一项复杂的任务. 请参阅选择 媒体容器格式(文件类型)中 的正确容器以获取帮助,以选择最适合您需要的容器文件格式; 同样,看选择视频编解码器网络视频编解码器引导选择音频编解码器的Web音频编解码器向导的帮助,选择第一媒体编解码器使用您的内容和您的目标受众.

需要记住的另一件事:移动浏览器可能支持台式机不支持的其他格式,就像它们可能不支持台式机版本所支持的所有相同格式一样. 最重要的是,台式机浏览器和移动浏览器可以减轻媒体播放的处理负担(无论是对所有媒体还是仅对内部无法处理的特定类型). 这意味着媒体支持部分取决于用户安装了什么软件.

那么我们该怎么做呢? 看一下下面的更新示例也可以在此处现场试用 ):

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

在这里,我们从实际的<video>标记中删除了src属性,而是包括了指向各自源的单独的<source>元素. 在这种情况下,浏览器将遍历<source>元素并播放它具有编解码器支持的第一个元素. 如今,包括WebM和MP4源应该足以在大多数平台和浏览器上播放视频.

每个<source>元素也都有一个type属性. 这是可选的,但建议您将其包括在内. type属性包含<source>指定的文件的MIME类型 ,浏览器可以使用该type立即跳过他们不了解的视频. 如果不包括type ,则浏览器将加载并尝试播放每个文件,直到找到合适的文件为止,这显然会花费时间并且不必要地占用资源.

请参阅我们的媒体类型和格式指南,以帮助您选择适合您需要的最佳容器和编解码器,以及查找正确的MIME类型以为每种类型指定.

Other <video> features

显示HTML视频时,您可以包括许多其他功能. 看下一个例子:

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

生成的UI如下所示:

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

新功能包括:

width and height
您可以使用这些属性或CSS控制视频大小. 在这两种情况下,视频均保持其原始的宽高比 (即纵横比) . 如果未通过您设置的尺寸来保持宽高比,则视频将增长以水平填充该空间,并且默认情况下,未填充的空间将仅具有纯色背景色.
autoplay
在加载页面的其余部分时,使音频或视频立即开始播放. 建议您不要在网站上使用自动播放视频(或音频),因为用户会发现它确实很烦人.
loop
使视频(或音频)在播放完毕后再次开始播放. 这也可能很烦人,因此仅在确实必要时使用.
muted
Causes the media to play with the sound turned off by default.
poster
播放视频之前将显示的图像的URL. 它旨在用于初始屏幕或广告屏幕.
preload

用于缓冲大文件; 它可以采用以下三个值之一:

  • "none"不会缓冲文件
  • "auto"缓冲媒体文件
  • "metadata"仅缓冲文件的元数据

您可以找到上面的示例,可以在Github进行实时播放 (另请参见源代码 .)请注意,我们没有在实时版本中包含autoplay属性-如果视频在页面加载后立即开始播放,您可以看不到海报!

The <audio> element

<audio>元素的工作方式与<video>元素相同,但有一些小的区别,如下所述. 一个典型的示例可能如下所示:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

这会在浏览器中产生如下内容:

A simple audio player with a play button, timer, volume control, and progress bar

注意 :您可以在Github上实时运行音频演示 (另请参见音频播放器源代码 .)

与视频播放器相比,它占用的空间更少,因为没有视觉组件-您只需要显示控件即可播放音频. 与HTML视频的其他区别如下:

  • <audio>元素不支持width / height属性-同样,没有视觉组件,因此没有要为其分配宽度或高度的元素.
  • 它还不支持poster属性-再次,没有视觉组件.

除此之外, <audio>支持与<video>相同的所有功能-请查看上述部分以获取有关它们的更多信息.

Restarting media playback

您随时可以通过调用元素的load()方法,将媒体重置为开始,包括选择最佳媒体源的过程(如果使用<source>元素指定了多个媒体load() .

const mediaElem = document.getElementById("my-media-element");
mediaElem.load();

Detecting track addition and removal

您可以监视媒体元素内的曲目列表,以检测何时将曲目添加到元素的媒体或从元素的媒体中删除. 例如,您可以监视是否在关联的AudioTrackList对象(通过HTMLMediaElement.audioTracks检索到)上触发了addtrack事件,以便在将音轨添加到媒体时得到通知:

const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
  audioTrackAdded(event.track);
}

您可以在TrackEvent文档中找到有关此信息的更多信息.

Displaying video text tracks

现在,我们将讨论一个稍微高级的概念,这对您很有用. 至少在某些时候,许多人不能或不想听到在网络上找到的音频/视频内容. 例如:

  • 许多人有听觉障碍(例如听觉障碍或耳聋),因此根本听不清楚声音.
  • 其他人可能无法听到音频,因为它们处于嘈杂的环境中(例如,正在播放体育游戏时拥挤的酒吧).
  • 类似地,在播放音频会分散注意力或干扰他人的环境中(例如在图书馆或当伴侣试图入睡时),添加字幕可能非常有用.
  • 不讲视频语言的人可能想要文字记录,甚至翻译,以帮助他们理解媒体内容.

能够为这些人提供音频/视频中所讲单词的文字记录,这不是很好吗? 好吧,多亏了HTML视频,您可以做到. 为此,我们使用WebVTT文件格式和<track>元素.

注意 :"转录"的意思是"将口语文字记为文本." 结果文本是"成绩单".

WebVTT是一种用于写入包含多个文本字符串以及元数据(例如,视频中应显示每个文本字符串的时间,甚至是有限的样式/位置信息)的元数据的文本文件的格式. 这些文本字符串称为提示 ,并且有多种提示用于不同目的. 最常见的提示是:

subtitles
异物翻译,适用于不理解音频中所讲单词的人们.
captions
对话或重要声音的描述的同步转录,使听不到声音的人了解正在发生的事情.
timed descriptions
媒体播放器应说出的文本,以向盲人或视障用户描述重要的视觉效果.

一个典型的WebVTT文件如下所示:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

要与HTML媒体播放一起显示此内容,您需要:

  1. 将其另存为.vtt文件.
  2. 使用<track>元素链接到.vtt文件. <track>应该放在<audio><video> ,但要放在所有<source>元素之后. 使用kind属性可以指定提示是subtitlescaptions还是descriptions . 此外,使用srclang告诉浏览器您用哪种语言编写了字幕.

这是一个例子:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

这将导致显示字幕的视频如下所示:

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

有关更多详细信息,请阅读" 向HTML5视频添加标题和字幕" . 您可以在Github上找到由Ian Devlin撰写的本文附带的示例 (也请参见源代码 .)该示例使用一些JavaScript允许用户在不同的字幕之间进行选择. 请注意,要打开字幕,您需要按下" CC"按钮并选择一个选项-英语,德语或西班牙语.

注意 :文本轨道还可以帮助您实现SEO ,因为搜索引擎尤其擅长文本. 文本轨道甚至允许搜索引擎直接链接到视频中途的某个地点.

Active learning: Embedding your own audio and video

为了进行这种积极的学习,我们(理想情况下)希望您走出去并录制一些自己的视频和音频-如今,大多数电话都允许您非常轻松地录制音频和视频,并且可以将其传输到到计算机上,就可以使用它. 对于视频,您可能需要进行一些转换才能最终得到WebM和MP4,对于音频,您可能需要进行MP3和Ogg转换,但是有足够的程序可以让您轻松完成此操作,例如Miro Video ConverterAudacity . 我们希望您能去!

如果您无法获取任何视频或音频,则可以随时使用我们的示例音频和视频文件来进行此练习. 您也可以使用我们的示例代码作为参考.

我们希望您:

  1. 将音频和视频文件保存在计算机上的新目录中.
  2. 在同一目录中创建一个名为index.html的新HTML文件.
  3. 在页面中添加<audio><video>元素; 使它们显示默认的浏览器控件.
  4. 给这两个元素提供<source>元素,以便浏览器找到它们最支持的音频格式并加载它. 这些应该包括type属性.
  5. <video>元素一个海报,该海报将在视频开始播放之前显示. 祝您创建自己的海报图形愉快.

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

Test your skills!

您已经到了本文的结尾,但是您还记得最重要的信息吗? 在继续进行之前,您可以找到一些其他测试来验证您是否保留了此信息—请参阅测试您的技能:多媒体和嵌入 .

Summary

那是一个包裹; 我们希望您玩得开心,在网页中播放视频和音频! 在下一篇文章中,我们将研究使用<iframe><object>类的其他在Web上嵌入内容的方法.

See also

In this module