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