我需要了解最新的 HTML5 视频的哪些内容？

Dave_Voyles

4.94/5 (8投票s)

2015 年 6 月 5 日

CPOL

8分钟阅读

17810

在本教程中，我将解释如何使用此云媒体解决方案进行设置，并开始尝试交付实时或点播视频。

您是否曾想创建类似 Twitch.tv 的应用程序来直播您的作品？或者创建类似 YouTube 的程序来播放您之前录制的视频？过去您可能使用 Flash、Java 或 Silverlight 来处理富媒体，但是随着 Chrome 42 宣布不再支持这些插件，现在是时候拥抱 HTML5 了。

在微软工作之前，我是康卡斯特产品开发团队的高级工程师，负责过包括 Web、Xbox One、Xbox 360 和 SmartGlass 在内的多个平台的视频播放器。这段经历让我对前沿视频技术有了出色的了解，很高兴我能将这些经验带到现在的职位，并与大家分享我学到的知识。

这是关于使用 Azure Media Services 创建和消费 HTML5 视频系列文章的第一篇。在本教程中，我将解释如何使用此云媒体解决方案进行设置，并开始尝试交付实时或点播视频。

首先，视频格式入门

有多种格式可供选择，让我们来看看今天可以使用的一些格式。首先，也是最重要的，我们应该了解自适应流媒体是如何工作的，因为许多接下来的技术都依赖于此。

自适应流媒体将视频分割成小的块。这种“自适应”的特点在于视频以多种比特率和分辨率进行编码，从而创建出不同大小的块。然后，播放器可以根据网络状况的变化，在不同的比特率/分辨率和大小的块之间自动选择和切换。

Scott Hanselman 对此（至少是对 Smooth Streaming）进行了很好的描述。

您需要亲眼看看才能理解，但它实际上非常简洁巧妙。有些人看到一个 200MB 的视频文件被编码成 Smooth Streaming，生成的目录有 500MB，可能会感到震惊。他们可能会说，这太大了！我没有那么多带宽！事实上，传输到网络上的数据量比硬盘上存储的数据量要少。其理念是 Smooth Streaming 创建了比特率的“阶梯”。它在磁盘上对文件进行多种比特率的编码和存储。

http://www.hanselman.com/blog/InstallingAndSettingUpAndEncodingForIIS7SmoothStreamingAndSilverlight.aspx

渐进式 MP4

Adobe.com 概述

这会将视频下载并缓存到观看者的计算机上。在开始播放之前，需要短暂的时间来缓冲和缓存媒体文件的开头。一旦视频被缓存，后续的观看就不需要任何缓冲。使用标准的 HTTP 协议，渐进式下载的文件通常通过内容分发网络 (CDN) 进行交付。因此，您的视频播放器会与 CDN（Azure）的服务器建立直接的 HTTP 连接来检索内容。

使用这种方式的缺点是浪费带宽。播放器会在获得足够数据后开始播放视频，但它会继续下载直到收到整个文件，而不管用户观看了多少。当观看者在一分钟后离开时会怎样？就是浪费带宽。

此外，与下面列出的格式不同，这种方式不允许视频质量在下载过程中发生变化。

HLS

streamingmedia.com 概述

HTTP Live Streaming (HLS) 是 Apple 旗下的技术，其原理基于自适应流媒体，通常以 10 秒的块进行分割。此外，它也适用于视频点播内容。它同时支持直播和点播视频。

Smooth Streaming

RBGnetworks.com 概述

这在 2008 年 10 月作为 Silverlight 的一部分发布，是 Internet Information Services (IIS) Media Services 的一项功能，IIS Media Services 是一个集成的基于 HTTP 的媒体交付平台。

Smooth Streaming 具备自适应流媒体的所有典型特征。它通过 HTTP 传输，被分割成小块，并且通常会编码多种比特率，以便播放器可以根据您的网络状况选择最佳视频比特率，以提供最佳的观看体验。

低廉的 Web 基础设施成本、防火墙兼容性和比特率切换只是自适应流媒体的一些优势。

MPEG Dash

Streamingmedia.com 概述。

DASH 的主要区别在于它是一个国际标准，现在由一个标准机构——运动图像专家组 (MPEG)——控制，而不是由微软（Smooth Streaming）或 Apple（HLS）控制。许多公司参与了 MPEG DASH 的创建和标准化工作，包括微软、苹果、Netflix、高通、爱立信、三星等等。

我们将 MPEG-DASH 视为我们过去几年在 Smooth Streaming 中引入和实现的所有功能的最终替代品。随着时间的推移，我们将支持 DASH，使其在功能上与 Smooth Streaming 保持一致，并引入一些只有在像 DASH 这样的行业标准中才能获得的更酷的功能。

HTML5 视频支持

<video> 标签在 HTML5 中已经存在很多年了，所有现代浏览器都支持它。W3C schools 页面清晰地说明了它的用法。

将其添加到您的页面非常简单

<video width="320" height="240" controls>

 

     <source src="movie.mp4" type="video/mp4">

 

     Fallback content: Your browser does not support the video tag.

 

</video>

事实上，您可能每天都在使用它。Netflix 曾经依赖 Silverlight 作为其视频播放器，但现在它已改为使用 HTML5 视频。YouTube 以前使用 Flash，但现在其大部分内容正在转换为 HTML5。您知道您在 Xbox One 上看到的那些视频播放器（YouTube、Xbox Video、Netflix 等）吗？没错，它们也都是 HTML5。

跨浏览器测试 HTML5 视频也变得容易得多，特别是各种版本的 Internet Explorer 和新的 Microsoft Edge。要做到这一点，您可以获取免费的虚拟机，或者在您的 Mac、iOS、Android 或 Windows 设备上进行远程测试。

关于播放器的一点说明

有很多选择。在本教程中，我使用的是Azure Media Services Player，因为它是一个不错的起点，可以帮助您了解媒体流媒体的工作原理。它包含许多示例视频，以及一个简单的下拉菜单，您可以在其中选择各种格式，并查看每种格式背后的技术和保护级别。

它开箱即用地支持多种格式，包括

Smooth Streaming
MPEG Dash
HLS
渐进式 MP4

最棒的是，您甚至不需要创建自己的播放器或页面来测试您的视频内容。只需更改内容的 URL，即可开始播放。

您还可以查看开源的video.js框架。它与 Microsoft 播放器（如下文）类似，但也提供了大量选项，可以轻松进行样式设置。他们还有一个出色的皮肤设计器。但是，如果您对高级 CSS 不太熟悉，我建议您谨慎使用。

构建您自己的视频播放器

我们可以使用几种播放器框架，但为了简单起见，让我们使用微软提供的 HTML5 播放器。您可以在此处找到其文档。还有一个可用的示例。

使用它的好处包括：

HTML5 播放器框架可在浏览器中提供一致的视频体验。这是通过检测客户端上可用的不同视频播放器技术（例如 HTML5 video 标签、Silverlight 等）来实现的，然后提供相同的 JavaScript API 和相同的控件集，而不管使用的是何种技术。它会遍历一系列备用视频播放器技术，直到找到支持的技术。

我将在下一篇文章中提供有关此内容的更多信息。

下一步？浏览器嵌入。应用封装。

在我的下一篇文章中，我们将介绍在浏览器中创建自己的视频播放器的过程。更妙的是，我们可以“封装”该 HTML5 站点和播放器，并使用 Cordova 等工具为移动设备和 Windows 创建混合应用程序。

在此之后，我们将设置一个 Azure 帐户并创建我们的第一个 Media Services 内容，该内容可以在我们新创建的视频播放器上播放。如果您想立即开始，可以注册一个免费 Azure 试用版和Visual Studio Community（现在也是免费的 IDE），或者联系我了解如何获得包含免费每月 Azure 积分的BizSpark 帐户。

了解更多关于 Azure Media Services 的信息

以下是一些学习媒体、Azure 以及如何快速上手的好资源

或我们团队关于 HTML、CSS 和 JS 的更广泛的学习系列

提高 HTML/JavaScript 性能的实用技巧 (一个 7 部分的系列，涵盖响应式设计、休闲游戏和性能优化)
现代 Web 平台 JumpStart (HTML、CSS 和 JS 的基础知识)
使用 HTML 和 JavaScript 开发通用 Windows 应用 JumpStart (使用您已有的 JS 来构建应用程序)

本文是 Microsoft Web 开发技术系列的一部分。我们很高兴与您分享Microsoft Edge以及新的EdgeHTML 渲染引擎。在 http://dev.modern.ie/ 获取免费虚拟机或在您的 Mac、iOS、Android 或 Windows 设备上进行远程测试。