用户喜欢媒体，尤其是视频；它们可以很有趣且信息丰富。在移动设备上，视频可能比文本更易于消费信息。为了获得良好的用户体验，视频不应需要超过可用带宽。用户应该能够使用它们，无论他们使用什么设备观看。用户永远不需要等待媒体下载。没有人喜欢按下播放按钮却什么也没发生。
您无疑在自己的设备上观看过视频，这意味着上一段中的任何内容都不会让您感到惊讶。现在您需要学习如何在您自己的网站上放置视频或其他媒体文件。添加媒体的技术要求应服务于用户体验。
技术要求
- 媒体文件的版本采用常见的 Web 友好格式，其中包含音频和视频流。
- 分辨率适合您用户的设备。
- 比特率不会使您用户的网络带宽过载。
- 使用适当的技术，可以在所有主要浏览器上查看结果。
- 文件已加密（可选）。
本网站的媒体部分将帮助您实现这些技术要求。如果这些概念仍然有些抽象，请不要担心。我们将在所有文章中逐步解释它们。在第一部分中，您将学习媒体的基本概念，然后在第二部分中学习如何将媒体添加到 Web，最后在最后一部分中，您将学习实际应用，以及在 Web 上使用媒体的一些高级技术。
在 Web 上显示视频
在网站上显示视频时，您可以采用四种方法。
- 将您的视频上传到媒体托管提供商，例如 YouTube 或 Vimeo。这些选项要求您将他们的播放器嵌入到您的网站中。
- 使用 HTML 代码
<video>和<audio>元素进行基本自托管嵌入。 - 使用视频库（例如 Shaka Player、JW Player 或 Video.js）进行更全面的嵌入。
- 构建您自己的媒体服务器和流媒体应用程序。
本网站主要介绍嵌入媒体的基础知识。但是，我们确实涵盖了一些更高级的主题，以帮助您开始构建自己的媒体流应用程序。完成这项工作并非易事，因此我们构建了一个具有离线支持的 Media PWA 作为参考，这应该向您展示实现此目的的方法以及所需的工作量。该应用程序绝不是生产就绪的产品，也不是 YouTube 或 Vimeo 等服务的竞争对手，但它将为您提供一个起点，让您学习具有挑战性和新颖性的东西。
坦率地说，构建托管媒体服务的竞争对手需要一支专家工程师团队和数千人时的工作量。除非您的目标是作为竞争对手进入该市场，否则您最好使用其他方法之一。了解这项技术是件好事，虽然您可能不会推出自己的应用程序或视频播放器，但探索和试验浏览器支持的最前沿，或者至少使用现有的视频库之一，是有用的。
我们将要学习的内容
媒体合集分为三个部分。在第一部分中，我们将提供概念和先决条件信息，以帮助您将媒体添加到您的网站。这包括解释媒体文件是如何组合在一起的、准备 Web 文件所需的应用程序的基本知识以及流媒体概念。第二部分解释了如何准备文件并将其转换为各种格式，并可选择添加加密。在最后一部分中，我们将向您展示如何在网页中嵌入媒体文件，讨论自动播放最佳实践、使用媒体框架、使视频离线以及使您的视频可访问。
有很多内容要介绍，所以让我们从媒体文件基础知识开始。