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