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