HTML5视频技术与Azure Media Services入门

随着Chrome 42宣布不再支持Flash、Java或Silverlight等插件,现在是时候转向HTML5了。在加入微软之前,曾在Comcast的产品开发团队担任高级工程师,负责多个平台的视频播放器开发,包括Web、Xbox One、Xbox 360和SmartGlass。这段经历让对尖端视频技术有了深刻的理解,很高兴能将这些经验带到微软,并与他人分享所学到的知识。

这是一系列关于使用Azure Media Services创建和消费HTML5视频的文章的第一篇。在本教程中,将解释如何使用这个云媒体解决方案来设置并开始尝试提供实时或按需视频。

视频格式简介

有许多格式可供选择,让来了解一些当今可以使用的格式。首先,应该理解自适应流媒体的工作原理,因为许多即将介绍的技术都依赖于此。

自适应流媒体将视频分割成小块。“自适应”的部分在于视频以多种比特率和分辨率进行编码,创建了多种大小的块。从那里,播放器可以在不同的比特率/分辨率之间选择,并根据网络条件的变化自动适应更大或更小的块。

Scott Hanselman很好地描述了这一点(至少是Smooth Streaming)。必须亲眼看到它才能理解,但它的简单性非常巧妙。有些人在将一个200兆的视频文件编码为Smooth Streaming时,结果目录是500兆,他们可能会说,它更大了!没有那么多带宽!实际上,通过线路发送的数据比磁盘上的数据少。Smooth Streaming创建了比特率的“步骤”。它以多种比特率编码并存储文件。

渐进式MP4:Adobe.com概述。这种格式在观众的计算机上下载并缓存视频。需要短暂的时间来缓冲并缓存媒体文件的开始部分,然后才开始播放。一旦视频被缓存,后续观看就不需要任何缓冲。使用标准的HTTP协议,渐进式下载的文件通常通过内容分发网络(CDN)传输。所以,视频播放器会与CDN的服务器(Azure)建立直接的HTTP连接来检索内容。

使用这种方法的缺点是浪费带宽。播放器会在有足够的数据进行播放时开始视频播放,但它会继续下载,直到接收到整个文件,不管用户观看了多少。当观众在一分钟后离开时会发生什么?浪费带宽。此外,这不允许在下载过程中改变视频质量,与下面列出的格式不同。

HLS:streamingmedia.com概述。HTTP Live Streaming(HLS)是苹果公司拥有的,基于自适应流媒体的理念,通常以10秒的块进行。此外,它也适用于点播内容。它支持实时和点播视频。

Smooth Streaming:RBGnetworks.com概述。这在2008年10月作为Silverlight的一部分宣布,并是Internet Information Services(IIS)Media Services的一部分,这是一个集成的基于HTTP的媒体交付平台。

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

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

MPEG Dash:Streamingmedia.com概述。DASH的主要区别在于它是一个国际标准,现在由一个标准机构控制——电影专家组(MPEG),而不是由微软(Smooth Streaming)或苹果(HLS)控制。包括微软、苹果、Netflix、高通、爱立信、三星等在内的几家公司参与了MPEG DASH的创建和标准化工作。

认为MPEG-DASH最终将取代过去几年在Smooth Streaming中引入和实现的所有功能。随着时间的推移,将推出DASH支持,使其与Smooth功能一致,并引入一些只有在行业标准如DASH中才有的更酷的功能。

HTML5视频支持

video标签已经在HTML5中存在了好几年,所有现代浏览器都支持它。W3C学校页面清楚地说明了它的用法。

以下是如何将其添加到页面的示例:

<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框架。它与微软播放器类似,但也提供了很多选项,使其易于样式化。他们有一个优秀的皮肤设计器。但是,如果对高级CSS不太熟悉,建议远离这个。

构建自己的视频播放器

有几种播放器框架可以使用,但为了简单起见,让使用微软提供的HTML5播放器。可以在这里找到它的文档。还有一个工作示例。

以下是使用它的一些好处:

  • HTML5播放器框架为浏览器提供了一致的视频体验。这是通过检测客户端上可用的不同视频播放器技术(例如HTML5视频标签、Silverlight等)来实现的,然后提供相同的JavaScript API和相同的一组控件,无论使用哪种技术。它将遍历一个回退视频播放器技术的列表,直到找到一个支持的技术。

将在下一篇文章中包含更多关于这方面的信息。

接下来是什么?浏览器嵌入。应用包装。

在下一篇文章中,将介绍如何在浏览器中创建自己的视频播放器的过程。更好的是,可以“包装”那个HTML5站点和播放器,并使用Cordova这样的工具为移动设备和Windows创建混合应用程序。

之后,将设置一个Azure帐户,并创建第一个Media Services内容,可以在新视频播放器上回放。如果想立即开始,可以注册一个免费的Azure试用版和Visual Studio Community(现在也是一个免费的IDE)或联系获取有关如何获得BizSpark帐户的信息,该帐户每月有免费的Azure信用额度。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485