什么是媒体体验?

Derek Herman
Derek Herman
Joe Medley
Joe Medley

用户喜欢媒体,尤其是视频;它们既有趣又信息量大。在移动设备上,视频比文字更容易传递信息。为了提供良好的用户体验,视频所需的带宽不应超过可用带宽。无论用户使用何种设备查看,都应当能够使用这些功能。用户绝不应需要等待媒体下载完毕。按下播放键却毫无反应,没人喜欢

毫无疑问,您在自己的设备上观看了视频,这意味着上面一段中的内容不会让您感到意外。现在,您需要学习如何将视频或其他媒体文件放到您自己的网站上。添加媒体的技术要求应有助于改善用户体验

  • 媒体文件的版本采用常见的网页型格式,其中包含音频和视频流。
  • 该分辨率适合用户的设备。
  • 比特率不会使用户的网络带宽过载。
  • 使用相应技术的所有主流浏览器都可以查看该结果。
  • 文件已加密(可选)。

本网站的媒体部分将帮助您满足这些技术要求。如果这些概念仍然有点抽象,请不要担心。我们将在所有文章中逐步对其进行说明。在第一部分中,您将了解媒体的基本概念,然后您将学习如何在第二部分中向网络添加媒体;在最后一部分中,您将了解在 Web 上使用媒体的实际应用以及一些高级技术。

在网页上显示视频

在网站上显示视频时,您可以采用四种方法。

  • 将视频上传到 YouTubeVimeo 等媒体托管服务提供商。 要使用这些选项,您必须将他们的播放器嵌入到您的网站中。
  • 使用 HTML <video><audio> 元素进行基本的自托管嵌入。
  • 使用 Shaka PlayerJW PlayerVideo.js 等视频库实现更全面的嵌入。
  • 构建您自己的媒体服务器和流式传输应用。

本网站主要介绍关于嵌入媒体的基础知识。不过,我们还介绍了一些更高级的主题,帮助您开始构建自己的流媒体应用。为了做到这一点并非易事,因此我们构建了一个具有离线支持的媒体 PWA 作为参考。这两者都会向您展示实现这一目标的方法,以及需要多少工作量。该应用绝不是现成产品,也不是 YouTube 或 Vimeo 等服务的竞争对手,但它将为您提供一个起点,让您学习具有挑战性的新知识。

坦白说,要为托管式媒体服务打造竞争对手,需要一支专业的工程师团队和数千小时的工作。除非您的目标是作为竞争对手进入该市场,否则最好使用其他方法。最好了解这项技术。虽然您可能并不推出自己的应用或视频播放器,但探索和试验最先进的浏览器支持功能(或者至少使用一个现有的视频库)会有所帮助。

学习内容

media 集合包含三部分。在第一部分中,我们将介绍向网站添加媒体的概念和前提条件信息。这包括介绍媒体文件如何组合在一起、有关准备 Web 文件所需的应用的基础知识,以及流式传输概念。第二部分介绍如何准备文件并将其转换为各种格式,以及视情况添加加密措施。在最后一部分中,我们将向您介绍如何在网页中嵌入媒体文件,讨论自动播放最佳做法、使用媒体框架、将视频添加到离线观看列表以及使您的视频可供访问。

我们首先要了解媒体文件基础知识