Flash Media Server 4.5入门—第六部分：初学者HTTP动态流技术向导

 

Flash Media Server 4.5入门——第六部分：初学者HTTP动态流（HDS）技术向导

原文地址：http://www.adobe.com/devnet/flashmediaserver/articles/beginning-fms45-pt06.html

前言

这篇文章是Adobe Flash Media Server 4.5入门系列教程的第六部分内容。这一部分内容主要教你（如何）使用HTTP的方式，而不是这一系列文章中一直使用的RTMP的方式，在Flash Media Server 4.5中实现视频流的转化，以及如何同时使用HTTP协议和RTMP协议实现使用了多比特率显示文件限制设备带宽的视频流的转化。

了解HTTP动态流

从很多方面来讲，HTTP动态流技术（在文章中以下部分简称HDS）是Adobe公司对苹果公司的Adaptive Bitrate Streaming技术以及微软公司的IIS Smooth Streaming技术的一个回应。这三项技术的共同之处在于它们通过HTTP网络连接传递媒体文件以及适应于用户当前带宽的媒体文件传输的能力。相对于连入以太网的个人电脑而言，Android设备的有效带宽就显得尤为不足了。（这项技术的）最终结果是，在各种设备上实现媒体文件的流畅回放，不管这些设备是智能手机还是台式计算机。

要更好地了解HDS是如何工作的，撇开技术上的内容，只考虑下述的虚拟场景：

ABC Video Services刚刚完成了一个一分钟短片的制作，它的老板Pete灵机一动，并没有使用录像带来承载其录音内容。Pete说：“我们何不放弃录像带，而是通过一种更为有效的方式把视频传输给用户呢？”

工作室的人对这个激进的想法都感到有些惊讶，因为每个人都知道，“这是我们一直在使用的方法。”Pete并没有接受这个论据，而是给出了下面一个假设：

“为什么不把录像内容切成十个六秒钟的小片段，然后顺序的把它们传输到设备中去播放？”

有点保守主义的Sam觉得这真是一个愚蠢的想法，但是Pete是他的老板，因此他并不想这么去说。他考虑了一会，想到了一个他认为可以把这个想法从根本上扼杀掉的反驳想法。他说：“Pete，这听起来很有趣，但不合实际啊。（如果按照你的想法，）客户将会拿到一堆看起来一样的录音条。我们如何能确保客户不会弄乱这些录音条的顺序？”

“这很简单”，Pete说，“我们可以给客户一个告诉他们应该在什么时间播放哪一个录音条的文件。我们所要做的就是把这个文件和录音条打包到一起传输给客户。客户所需要做的就是打开并阅读说明文件，然后一切都按计划进行了。”

这并不是HDS的产生过程，但它捕获了这项技术的本质。

HDS和Pete的想法又有什么关联呢？HDS可能就是由你伴随Flash Media Server (FMS)一同安装的Apache模块而来的。在这种情况下，FMS扮演着打包机的角色，制造内容片断，由Apache通过HTTP传输到Flash兼容的视频播放器。为了解决Sam所提出的反对意见，与F4M扩展一起，另外的一个清单文件也是通过同样的一个过程创建出来的。从根本上说，所需视频文件首先使用F4F扩展软件切割成若干片段，作为片段文件。清单文件中包含了视频的一些基本信息，包括每一个片段文件的位置以及其中最为重要的信息——这些片段传输到用户设备上的顺序。

如果这一切都是通过HTTP连接流动的，那么FMS 4.5是如何纳入这个过程的呢？Flash Media Server 4.5包含了两种类型的实时组件：live和Just-In-Time (JIT)。不管在哪种情况下，清单文件和F4F文件都能按照需求创建，并通过HTTP传输给客户来实现回放。例如，如果Sam有一部智能手机，想观看他刚编辑过的视频，他要做的就是打开他的手机上的浏览器，链接到包含这段视频的SWF文件的网页。SWF文件打开时，只需要F4M清单文件来启动视频片段有序的向设备浏览器的传输。

作为一个反对者，Sam马上就看到了这个方案存在的问题。“朋友们，我用的是3G网络，网速很慢；我没有你们所使用的以太网连接的带宽。这将会是一个很糟糕的体验。”

幸运的是，还有Pete。Pete说：“Sam，别激动。这不是问题。这个清单文件会把播放列表附在SWF文件上，它可以检测你的连接状况，如果你的带宽较低，在清单文件中查找该带宽下的最佳视频文件。我们称这个为‘多比特率流媒体’，你会喜欢上它的。”

既然这样说了，是时候让Sam喜欢上它了。

准备开始

虽然HDS的术语听起来是相当的“专业”，HDS应用程序的创建却是非常简单的：

1. 下载并解压缩本教程所需用到的练习文件。你会在文件夹中看到一个瀑布的视频。这个视频的格式正是HDS所需文件格式：应用了H.264视频编码器和AAC音频编码器的F4V格式。

2. 如图1所示，将文件置于Program Files/Adobe/Flash Media Server 4.5/webroot/vod文件夹下。把文件放置妥当之后，你就可以开始使用HDS了：

图1. 将视频文件添加到vod文件夹中

3. 打开在目录Flash Media Server 4.5/samples/videoPlayer/videoPlayer.html下找到的媒体播放器实例。
4. 在Stream URL区输入http://localhost/hds-vod/Waterfall.f4v.f4m，然后点击Play Stream按钮。如图2所示，视频开始播放：

图2. 视频通过HTTP传输播放

点击放大（+）

你可能会感觉很疑惑：“到底发生了什么？”你首先要知道的一件事情是，文件路径是关键。F4M扩展插件会告知FMS你需要这个媒体流的清单文件。hds-vod镜像通过寻址服务器上需打包文件路径启动Just-In-Time (JIT)程序。Flash Player打开文件包，获取清单中所需媒体流信息，然后根据用户需求开始播放清单中相应视频文件片段。

如果你已经做完了这一系列教程的学习，你可能还会注意到，（在这个过程中，）HTTP协议取代了RTMP协议的使用。如果你忘记了添加"http://"，播放器就会报错，“对不起，找不到您所需要的文件”。

除了使用RTMP而不是HTTP之外，HDS进程和这一系列中以往的任何进程都存在着很大的不同。Flash Player需要在清单文件中包含大量的逻辑语言来解析清单文件，然后有序地播放视频片段。Flash Media Playback，Strobe以及OSMF都有这样的功能并入其中，使得它们更加适用于HDS环境。它们可以将随选媒体流输送到Android设备，Flash Player 10及更新版本，以及AIR应用程序。对iOS设备的要求会有些许的不同，这个将会在以后的介绍中提及。

多比特率媒体流

这一系列教程的作者之一非常热衷于向他的学生说：“试图在你的移动设备上播放一个在你的电脑上播放的高清视频，无异于试图在一只蠕虫体内拖动一个西瓜。”随着移动设备的不断升级，你可不敢保证你编码的在高带宽环境下播放的视频文件只能在那样的环境中播放。移动设备网络是有带宽限制的，相信你们中很多人都有过在支持Flash的设备上播放视频，体验“在一只蠕虫体内移动一个西瓜”的经历吧。

在同一部视频中编码不同的比特速率的解决方法。在这个例子中，会使用Adobe Flash Media Encoder对Waterfall视频进行500，1000以及1,500 kbps三个不同的比特速率的编码。在这一部分，我将向你演示使用RTMP和HDS编辑多比特率（MBR）媒体流。

RTMP和MBR

正如你在前面练习中看到的那样，你需要从FMS媒体流转化多个文件。在这种情况下，它们是独立的F4V格式文件，与有效带宽而不是视频片段相关。

1. 在文本编辑器中或是在Adobe Dreamweaver CS5中打开Waterfall_rtmp.f4m文件。文件打开之后，你会看到，它显示的只是一个带有F4M扩展工具的XML文件（如图3所示）。

注意：这里所提供的示例文件是以你在电脑上安装FMS软件时创建的Program Files\Adobe\Flash Media Server 4.5\webroot\vod folder目录下的rtmp_sample1_manifest.f4m文件为基础的。

图3. 简单的MBR清单文件

这里重要的部分是<streamType>和<media>标签。<streamType>有三个可用值。如果你使用的是预先录制的视频，那么recorded就是你所需要的。如果你使用的是Flash Media Live Encoder (FMLE)，你就需要选用live。如果你不知道你在使用什么，为了保险起见，选用liveOrRecorded。

<media>标签只是包含了需要装载的文件的文件名以及决定装载哪一个视频文件的比特速率。这里所需要的逻辑语言都已经在Flash Player里面了。

2. 在Flash Media Server 4.5中调整好所有文件的位置。在你的Programs Folder文件夹中的FMS文件夹下，顺序找到…webroot/vod目录，把清单文件置于这个文件夹中，如图4所示。这个清单文件需要被置于这个文件夹里，因为这个例子使用的是MBR的RTMP“风格”：

图4. 清单文件被置于webroot/vod目录下 点击放大（+）

3. 选择RTMP_MBR文件夹中的三个视频文件，把它们复制到…applications/vod/media目录下，如图5所示。这样RTMP媒体流就被输出到了应用程序文件夹之外：

图5. 视频文件被置于… applications/vod/media目录下

4. 视频文件放到适当位置之后，你现在就可以测试多比特率输出了。找到…Flash Media Server 4.5\samples\videoplayer目录下的videoplayer.htm文件。播放器打开之后，在Stream URL区域输入http://localhost/vod/Waterfall_rtmp.f4m。点击Play Stream按钮，视频开始播放（如图6所示）：

图6. 由清单文件选择播放最适合有效带宽的文件 点击放大（+）

既然已经使用了RTMP协议，为什么还要使用HTTP协议？清单文件是从本地网站根目录提供服务的，这会用到HTTP协议。另一方面，视频文件位于applications/vod目录下，使用RTMP协议生成的流媒体文件也存储在这个位置。

当你点击Play Stream按钮时，清单文件中的播放列表检测设备带宽，开始播放Waterfall_1500.f4v文件，这是因为，媒体流是本地播放的，跟带宽无关。

HTTP动态流（HDS）和MBR

为HDS准备播放列表的过程和前面例子例子中讲到的会有所不同，因为你将要自主创建清单文件，将会直接调用播放列表，而不是由服务器实时的创建播放列表。在这个例子中，你将会用到伴随FMS一起安装的名为“the Configurator（配置器）”的工具。

1. 打开Adobe\Flash Media Server 4.5\tools\f4mconfig\configurator文件夹下的f4mconfig.html文件。文件打开后，你会看到配置器的工作界面（如图7所示）：

图7. 初识配置器

尽管它看起来是相当的复杂，但你只需要记住，你将要做的最多的就是复制和粘贴。这个工具所要做的就是添加媒体流到清单文件或播放列表中去，然后保存，在HDS中使用。然后你就可以在OSMF或Strobe视频播放器中播放这个文件了。最终的结果是，你会创建一个使用HTTP动态流，通过标准HTTP连接传输最优比特速率视频的视频应用程序或项目。

注意：在给Apple iOS设备创建多比特率播放列表时用到了M3U8标签，这些会在系列教程的下面部分做更加详细的介绍。对其他文件使用f4m标签。

2. 点击f4m标签，选择Stream URI区域，输入http://localhost/hds-vod/Waterfall_500.f4v.f4m.

3. 选定你刚输入的文字，复制到剪贴板。

4. 选择Bitrate区域，输入500。

5. 点击Add，你输入的路径和比特速率就会出现在Playlist上，如图8所示：

图8. 路径和比特速率出现在Playlist上

6. 再次选定Stream URI区域，粘贴剪贴板上文字。把文件名中的500改为1000，在Bitrate区域输入1000，然后点击Add。重复上述步骤，设置比特速率值为1500。

7. 点击Save Manifest，Save As对话框打开之后，更改文件名为Waterfalls_hds.f4m，把文件保存到你的Exercise文件夹下的HDS_MBR文件夹内。打开文件夹，把这三个视频文件以及清单文件复制到剪贴板上。

8. 找到并打开Adobe\Flash Media Server 4.5\webroot\vod文件夹，把剪贴板上的内容粘贴到vod文件夹中。

9. 打开videoplayer.html文件，并输入http://localhost/vod/Waterfalls_hds.f4m。当你点击Play Stream按钮时，就可以观看安大略湖北部的Sand River Falls的视频了（如图9所示）：

图9. 使用配置器生成的F4M文件的HTTP动态流 点击放大（+）

Flash，OSMF以及多比特率媒体流

到目前为止，你一直使用的都是FMS 4.5自带的播放器。在最后的这个练习中，你将会使用到网络上的开源媒体框架动作脚本库（Open Source Media Framework ActionScript library）来实现视频流的转化。

1. 打开Exercise文件夹中，Flash文件夹里的HTTP_Manifest.fla文件。文件打开后，你会看到图10所示的出错信息。不要因此而烦躁。这只是在告诉你，在Flash文件夹中没有找到OSMF.swc文件。点击OK关闭出错信息：

图10. 文件打开时你会看到出错信息

2. 选择Stage，打开属性面板。

3. 点击Script区域旁边的扳手图标，打开如图11所示的动作脚本设置（ActionScript Settings）对话框：

图11. 打开动作脚本3.0设置对话框

4. 点击Browse to SWC file按钮，找到Flash文件夹中的OSMF.swc文件。点击OK添加文件，这样一切就准备就绪了。

连接到SWC文件之后，看一下OSMF视频播放器的代码。

5. 选择动作层的第一帧，打开动作面板。输入第一个代码块：

1. import org.osmf.media.MediaPlayerSprite;
2. import org.osmf.layout.ScaleMode;
3. import org.osmf.media.URLResource;

复制代码

这个代码块的作用是导入包含于.swc文件内的，这个例子所需的级。

下面一行是很重要的：

1. var manifestResource:URLResource = new URLResource("http://localhost/vod/Waterfalls_hds.f4m");

复制代码

你需要在FMS服务器中指定清单文件。同时，你还要注意到，这需要用到HTTP以及在网站根目录下找到的hds-vod应用程序。（尽管在这个例子中用到的是HTTP，但值得注意的是，RTMP同样能够使用多比特率清单文件来通过FMS智能化地提供视频服务。）

既然Flash Player已经知道了到哪儿去查找清单文件，你就需要添加一个MediaPlayerSprite对象来显示视频流。这个对象同样也需要被置于Stage，它的尺寸则根据视频而定。在尺寸缩放时也并不会对它产生什么坏的影响。这些问题都可以由下面的代码块来解决：

1. var mediaPlayerSprite:MediaPlayerSprite = new MediaPlayerSprite();
2. mediaPlayerSprite.scaleMode = ScaleMode.LETTERBOX;
3. mediaPlayerSprite.x = 32;
4. mediaPlayerSprite.y = 74;
5. mediaPlayerSprite.width = 736;
6. mediaPlayerSprite.height = 506;

复制代码

最后一部分代码块将OSMF播放器添加到Stage并把它指定给清单文件。

1. this.addChild(mediaPlayerSprite);
2. mediaPlayerSprite.resource = manifestResource;

复制代码

6. 关闭动作面板，保存文件并测试项目。

由于其复杂性，Adobe强烈建议你在F4M清单文件中使用OSMF。OSMF大大简化了在各式各样的Flash项目中视频文件的使用。

下一步工作

这是本系列中相当精彩的一部分。你学会了如何使用HTTP动态流，如何以HTTP和RTMP来使用多比特率媒体流，以及如何与Adobe和其他工业伙伴所支持的开源媒体框架（OSMF）相结合来使用多比特率媒体流。下一部分将会转向移动空间，以及教你如何将视频以流媒体的方式输出到Apple iOS设备中。

1. 按需媒体流（HTTP）

2. 实况媒体流（HTTP）