原文地址:http://www.adobe.com/devnet/flash/articles/reops_pt2.html
RealEyes OSMF Player Sample(REOPS)是由RealEyes Media开发的，致力于为社区提供一个简单的，可定制化的方案，来开始创建一个强壮的基于Adobe OSMF的视频播放器的项目。 REOPS 项目对于开发者而言，是一快积木，就像是在直观表示OSMF框架的特性和如何使用它。
这篇文章是我们之前的文章"第一部分：配置和部署"的后续，，在上一篇文章中我们介绍了REOPS 项目。 这篇文章，将会向你展示，如何使用这块积木与OSMF做第一次亲密接触，并创建一个非常简单的OSMF播放器。 我们随后会详细参数如何将这组OSMF积木分成不同的组，就像REOPS项目如何逐步实现这些功能的一样。
要求
为了充分利用本文，你需要以下软件和文件：
Open Source Media Framework
REOPS项目文件
Flash Professional CS5 (或者 CS4)
Flash Builder 4
示例文件：
- reops_pt2.zip (ZIP, 9.3 MB)
预备知识
需要ActionScript 3的基本知识，了解 Adobe Flash Builder 或者Adobe Flash Professional将会对学习本教程很有帮助。
关于作者
David Hassoun是RealEyes Media，LLC的创建者，一个总部在科罗拉多州的数字媒体公司，致力于交互式媒体和基于Adobe Flash和Flex平台的高级应用。他一直对动态媒体，视频能量，和挑战易用性跟交互性上充满热情。他是一个Adobe的认证导师，在丹佛大学教授高级的RIA课程，为Rocky Mountain Adobe的用户提供服务，他已经开发了高级Flash和Flex程序并教授了这方面的课程。在作为顾问，或受雇于其他公司的历程中，David曾经广泛的供职在不同领域的公司中，例如 American Express（美国运通），Chase Manhattan（大通曼哈顿），Qwest，Boeing（波音），Macromedia，Adobe，US Air Force（美国空军），Bechtel/Bettis，以及很多其他地方。David通常编写一些高级的代码，和最佳技术实践的重审，并且在过去的几年内为国际性的业界领袖提供指导帮助--包括作为业界专家对很多技术，课件，和应用程序进行重审。
John Crosby是一个高级解决方案架构师，是RealEyes Media, LLC公司的合伙人。一直对新事物产生浓厚的兴趣.John染指了很多不同的项目和技术，并在Adobe提供Flash，Flash移动，和Flex方面的培训课程。作为一个资深的专业的通过键盘品尝美食的家伙，John一直在尝试各种工具，概念，和主意来使开发变得更加有趣，可靠，和有趣。
使用OSMF创建一个简单的播放器。
在这个教程中，你将会通过使用OSMF创建一个简单的播放器来进行实战。 现在，不要担心每个部件的细节。 我们将会回顾每个部分，它们都能做什么，REOPS如何使用它们。
REOPS 项目
在这篇文章中我们将参考REOPS 项目，所以，如果你还没有下载或者导出REOPS 的代码，你可以到 Google code的这个页面去获得代码。
OSMF 积木
我们同样也会回顾OSMF的代码，所以你最好也把它的代码下载下来。 REOPS 项目使用OSMF的.swc文件，但是你也许会想要亲自查看实际的OSMF框架代码。 你可以由不同的途径获得这些代码：
- 下载OSMF的源代码压缩包：http://opensource.adobe.com/wiki/display/osmf/Downloads
- 如果你常使用SVN，你可以从SVN迁出这部分代码：http://opensource.adobe.com/svn/opensource/osmf
在我们一头扎进这些代码之前，我们需要复习一些基本的OSMF媒体播放器的模块知识。 在你构建一个播放器的时候你将会常常使用这些部分，就像我们回顾REOPS如何使用OSMF来创建一个强力的，灵活的播放器平台一样。
要创建一个基本的播放器，你需要四样东西：
- MediaElement：这个对象描述了一个指定的媒体：一张图片，一个视频，或者其他媒体资源。
- MediaPlayer：这是一个高级的类，它提供对所有媒体类型的必要的互动支持。
- MediaContainer：这是一个基于Sprite类的容易，用以承装媒体对象。
- DisplayList：这是一个Sprite类的显示列表，用以添加MediaContainer对象。
注意：这个例子的完整代码可以在REOPS 的Google Code项目的下载列表中找到。 找到一个叫 TheSimplestPlayer.zip 的文件，里面包含了Flex项目的文件包。
- 在Flash Builder创建一个新的 ActionScript（Flex SDK4）项目，命名为TheSimplestPlayer (见图1)。
图1 创建新的ActionScript项目
- 在项目中添加一个用以承装swc文件的文件夹，命名为libs(见图2)。
图2 添加swc文件夹
- 一旦你完成了新建项目向导，马上就创建libs文件夹。 这个新项目应该看起来像图3一样。
图3 查看TheSimplestPlayer的文件结构。
- 从你下载到的OSMF项目中，拷贝OSMF的swc文件到libs文件夹中。
- 打开默认包中的TheSimplestPlayer.as。
- 在类定义的上方添加下面的元数据标签，来指定要编译的swf文件的宽和高。
[SWF( width="640", height="360" )] public class TheSimplestPlayer extends Sprite {
- 在类的构造函数中，创建一个变量叫videoPath ，并指定它的类型为String. 为这个变量赋值为URL：
"rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short" 这就是将被播放的媒体。 OSMF将流媒体的字符串分割为连接部分和内容部分。
public class TheSimplestPlayer extends Sprite { var videoPath:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"; }
- 在videoPath 变量的下面，创建一个新的变量叫做resource 并将它的类型指定为URLResource 。 将你刚刚创建的videoPath变量作为这个URLResource 变量初始化函数的唯一参数传递进去。 这个操作将媒体的路径包含在一个资源类型中，做为媒体类型为之后的上下文引用。
var videoPath:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"; var resource:URLResource = new URLResource( videoPath );
- 创建一个新的变量命名为element 并指定类型为VideoElement 。 将resource变量作为VideoElement 初始化函数的唯一变量传入。 这一步创建了一个可用的媒体元素，并将播放所需的链接和内容信息都承装到里面了。
var resource:URLResource = new URLResource( videoPath ); var element:VideoElement = new VideoElement( resource );
- 创建一个mediaPlayer 变量，并指定类型为MediaPlayer 。 将element 变量作为MediaPlayer 构造函数的唯一参数传递进去。 这样就创建了一个用于媒体播放的管理器和控制器，就可以控制媒体的加载和播放了。
var element:VideoElement = new VideoElement( resource ); var mediaPlayer:MediaPlayer = new MediaPlayer( element );
- 创建一个mediaContainer 变量，并指定它的类型为MediaContainer 。 MediaContainer 将会作为真正将媒体展现出来的管理器。
var mediaPlayer:MediaPlayer = new MediaPlayer( element ); var mediaContainer:MediaContainer = new MediaContainer();
- 调用mediaContainer 的addMediaElement函数，并将element 作为参数传递进去。 这步操作就将真正要播放的媒体对象添加到显示列表了：
var mediaContainer:MediaContainer = new MediaContainer(); mediaContainer.addMediaElement( element );
- 调用addChild函数，并将mediaContainer 作为参数传递进去。 这样就将MediaContainer 添加到显示列表了：
mediaContainer.addMediaElement( element ); addChild( mediaContainer );
完整的代码应该和下面的代码看起来一样：
[SWF( width="640", height="360" )] public class TheSimplestPlayer extends Sprite { public function TheSimplestPlayer() { var videoPath:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"; var resource:URLResource = new URLResource( videoPath ); var element:VideoElement = new VideoElement( resource ); var mediaPlayer:MediaPlayer = new MediaPlayer( element ); var mediaContainer:MediaContainer = new MediaContainer(); mediaContainer.addMediaElement( element ); addChild( mediaContainer ); }
- 保存文件，并运行程序。 你应该看到像图4一样，视频播放起来了。
图4. 播放视频
这是一个非常简单的播放器：没有控制面板，并且它只播放一个单个的视频文件--没有播放列表，也没有其他媒体类型。 不管怎样，这个播放器说明了如何使用OSMF的核心组件工作。
REOPS 的播放器如何使用OSMF创建播放器呢。
REOPS 播放器使用MediaPlayerSprite 类。 MediaPlayerSprite 类提供了一些额外的实现，使得使用OSMF 开发变得更加容易和快捷。 下面的章节我们将会介绍创建OSMF播放器要使用的每个主要类型，并指出REOPS 项目中集成它们的部分。 图5，REOPS 中使用OSMF部件之间的关系。
图5.REOPS 播放器的结构
MediaPlayerSprite 类
MediaPlayerSprite （图6）允许一个带有显示特性的媒体元素，经由使用MediaContainer 被添加到显示列表。 为了实现这个目标MediaContainer实现了很多关键代码。 另外，MediaContainer 还提供了对OSMF内置布局API的支持。目前，REOPS 项目不使用MediaPlayerSprite，而是直接使用MediaContainer 对象。 MediaPlayerSprite 为你创建了一个MediaContainer 对象。
另外，MediaPlayerSprite类可以控制MediaPlayer控制器的创建（你也可以创建你个人的MediaPlayer实例，然后将它传递给MediaPlayerSprite）。 MediaElement 和MediaPlayer 听起来很相似。 它们都在你刚刚建立的播放器中被使用了。 然而，DisplayObjectTrait是一个新的概念。 下面，我们将会向你展示这个特性如何适应到OSMF 和REOPS 对象中。
了解媒体特性。
MediaElements，我们等一下就会介绍它，通过它的能力，完整的阐述了这个特性。 例如，一个音频文件具有一个长度，或者一个时间线，但是一个图片文件就没有--所以，一个基于音频格式的媒体元素，也将会觉有一个时间的特性，而基于图像的媒体元素则没有这个特性
这里有一些事情我们要在利用特性工作时要注意的：
- MediaElement 可以聚合特性，所以，基于音频的MediaElement 并不只有时间属性，同时还有音频特性，和加载特性。
- 特性之间是相对独立的。 没有任何一个特性扩展自其他的特性。
- 不同的特性都派发个子的事件。
- 特性可以被再任何时间添加和移除；所以，你需要在MediaElement对象上监听traitAdd （MediaElementEvent.TRAIT_ADD）和traitRemove （MediaElementEvent.TRAIT_REMOVE）事件，以管理你的媒体播放器的相关功能，以匹配当前MediaElement的特性。
要在构建一个播放器时，考虑到所有不同MediaElements可能拥有的特性的组合的整合，是一件需要相当大工作量的工作。 幸运的是，有一个类可以帮助我们简单的处理用特性工作：MediaPlayer 类。
介绍MediaPlayer 类
MediaPlayer 是一个高级的类，它提取了OSMF中的许多低级的细节属性。 这个类不再动态的管理不同的媒体属性，而是提供一些简单的属性，方法，和事件来管理所有不同的属性。 MediaPlayer类提供了一些默认的功能，例如，重播，自动播放，和自动重放，就像OSMF提供的所有控制播放的方法一样。 这使得MediaPlayer成为一个播放器的最佳基础REOPS直接使用MediaPlayer类。（见图6） 对于其他的用例，MediaPlayerSprite 创建了一个MediaPlayer类的实例，程序可以通过这个实例的变量来控制MediaElements。
图6. 包装在MediaPlayerSprite类内的MediaPlayer
使用MediaElements 类。
MediaElement 类和它的子类都描述了媒体播放器当前正在播放的属性。 MediaElement可以描述一个单个的媒体，比如视频片段，和一张图片，但是很多情况下，也可以表述一个由不同媒体元素组成的复合媒体。 在TheSimplestPlayer 例子中，只有一种媒体元素--一个视频片段，直接使用VideoElement 。 这样很容易达成目标，但是失去了灵活性。 为了处理多种不同的媒体元素---视频，音频，图片，复合类型，以及更多的类型--你将会需要判断你要播放的类型，然后创建不同的MediaElement 类型。 OSMF提供给你一个MediaFactory 来完成这个任务。
了解MediaFactory 类。
MediaFactory 需要返回一个URL或者一个路径到MediaElement中，让OSMF 能够理解。 MediaFactory通过在已知资源类型列表中比较来匹配指定的MediaElements的类型。 当发现了匹配的项，就创建一个MediaElement 。 OSMF提供了一个DefaultMediaFactory，可以创建所有目前OSMF支持的媒体类型的MediaElements 。
注意：重审org.osmf.media.MediaFactory和org.osmf.DefaultMediaFactory类的代码，可以给你一些MediaFactory 如何工作的基础知识，以及你如何修改适合于你的媒体播放器的类型。
使用MediaFactory构建你的播放器，是一个相对比较直接的方法。 一旦你了解了一个MediaFactory 对象，你可以调用createMediaElement函数，并传递一个MediaResource进去。 MediaFactory 会为传入的资源创建出适当的MediaElement，并将其作为返回值返回， 这个返回值可以被播放器显示出来。 MediaFactory 可以被继承和定制化，但是在大多数应用中，你可以直接使用提供了默认媒体元素的DefaultMediaFactory类来实现创建功能。
MediaElement和他们对应的资源。
MediaElement的创建基于要表现的资源类型。 MediaResourceBase类是所有资源类的基类。 MediaElementBase的子类分别实现了指定类型的媒体元素。 这里有一些示例：
- URLResource：图片，SWF，渐进式加载的视频。
- StreamingURLResource：流式加载的视频的音频。
- DynamicStreamingResource：动态流式视频。
下面的代码片段展示了一个简单MediaFactory使用样例：
var mediaFactory:MediaFactory = new DefaultMediaFactory(); var resource:MediaResourceBase = new URLResource( "http://path/to/media.mp3" ); var audioElement:AudioElement = mediaFactory.createMediaElement( resource );
在TheSimplestPlayer中添加MediaFactory
在这个简单的教程中你将会添加MediaFactory到你在之前教程中编写的代码中，以动态的为你创建MediaElement：
- 打开默认包中之前编写的TheSimplestPlayer.as
- 在构造函数中，创建资源变量的那一行代码下面，创建一个新的变量，命名为mediaFactory，将它的类型设置为DefaultMediaFactory 并将其实例化。
var resource:URLResource = new URLResource( videoPath ); var mediaFactory:DefaultMediaFactory = new DefaultMediaFactory();
- 修改创建媒体元素的变量。 将变量的类型修改为MediaElement，以匹配createMediaElement函数的返回值。 要确定你将资源对象传递给createMediaElement函数了。 在这里修改：
var element:VideoElement = new VideoElement( resource );
修改成：
var element:MediaElement = mediaFactory.createMediaElement( resource );
完整的代码应该和下面的代码看起来一样：
[SWF( width="640", height="360" )] public class TheSimplestPlayer extends Sprite { public function TheSimplestPlayer() { var videoPath:String = "rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"; var resource:URLResource = new URLResource( videoPath ); var mediaFactory:DefaultMediaFactory = new DefaultMediaFactory(); var element:MediaElement = mediaFactory.createMediaElement( resource ); var mediaPlayer:MediaPlayer = new MediaPlayer( element ); var mediaContainer:MediaContainer = new MediaContainer(); mediaContainer.addMediaElement( element ); addChild( mediaContainer ); } }
- 保存文件，并运行程序。
看起来好像没有太大改变，但是你现在应该了解了通过这些改变，使这个播放器变得更灵活了。 你不需要在创建媒体对象之前知道它的类型了。 你所要做的就是，传递一个媒体的路径给MediaFactory 然后，MediaFactory 将会为你找出它属于什么类型。
REOPS和MediaFactory 类。
REOPS 项目使用一个自定义的REMediaFactory 继承于MediaFactory，以提供一些高级的功能，在之后的文章中会涵盖到这些点（见图7） REOPS 也是用OSMF内置的特性实现了一些连接共享。
图7 MediaFactory在REOPS 结构中的位置
连接共享和NetConnectionFactory
REOPS项目使用NetConnectionFactory 来实现播放器中的连接共享（见图8）. REMediaFactory 的构造函数可以接收一个NetConnectionFactory 对象作为参数。 NetConnectionFactory 可以被用来生成NetConnection 对象和管理MediaElement之间的连接共享。 它通过比较MediaElement们的资源地址来决定那些连接是可以被共享的。
图8. NetConnectionFactory在REOPS 结构中的位置。
下面的代码片段简洁的表述了如何使用NetConnection 管理器来共享连接。
var netConnectionFactory:NetConnectionFactory = new NetConnectionFactory(); var mediaFactory:REMediaFactory = new REMediaFactory( netConnectionFactory );
配置一个新的REOPS 播放器。
关于如何使用OSMF 中的主要组件，和REOPS的播放器如何使用OSMF，你应该有了一个清晰的认识。 在这一部分中，我们将会向你展示如何通过XML配置文件配置REOPS播放器，并使用这个新的配置文件部署一个新的播放器。
配置REOPS 的XML配置文件。
我们已经为这段课程准备了一个Flex项目的打包文件。 你可以在 REOPS Google Code项目的下载列表中找到它；文件名是MyREOPS_start.zip。 这个项目包含了一些可以让REOPS播放器快速，容易的启动的东西。
- src/MyREOPS.as，主程序文件。 这里面并没有很多的代码，因为这个类继承自库中的REOPS基类。
- libs/REOPSLib.swc：包含REOPS 项目所有代码的swc文件（这个文件同样可以在Google code项目的下载列表中下载）
- assets/data 文件夹：一个用来开始XML配置文件的地方。
- assets/skins 文件夹：要传递给REOPS的皮肤文件。
使用REOPS 的XML配置文件
按照以下步骤来配置REOPS 的XML配置文件。
- 在Flash Builder中导入项目。
- 从你下载到的OSMF项目中，拷贝OSMF的swc文件到libs文件夹中。
- 运行MyREOPS 项目。 你应该可以看到一个正在播放的视频。
图9视频在初始的MyREOPS项目中播放。
- 打开在assets/data文件夹中的reosmf_config.xml 文件 这个文件是一个格式正确的，基本的配置文件，它设置了一个简单的播放器所有基本的元素。
注意：附加的节点和属性可以用来添加额外的功能。 更多关于这部分的信息可以在这个项目的 Google Code wiki页面上找到。
- player节点控制整个播放器的大小和缩放模式。
- mediaElement和它的子节点控制要用播放器播放的媒体的初始化。
- skin节点配置了皮肤的元素。
- 要使用哪些皮肤swf文件呢。
- 皮肤元素的位置，例如控制条，和加载图标。
修改播放器的尺寸。
按照以下步骤来修改播放器的尺寸。
- 在reosmf_config.xml文件中，改变width 的属性值为768，height 的属性值为600:
player width="768" height="600" scaleMode="stretch" isLive="false" autoPlay="true" updateInterval="250" hasCaptions="false"
- 保存文件。
- 运行应用程序 播放器和视频现在将会显示得更大一些(见图10)。
图10.视频，被调整成一个较大的尺寸。
修改缩放模式。
按照以下步骤来修改缩放模式：
- 回到 reosmf_config.xml 文件中。
- 将 节点的scaleMode 属性值从stretch 修改为 letterbox。
注意：可用的scaleMode 值有none，stretch, letterbox 和zoom. 要了解这些模式都是如何实现的，请查看 org.osmf.display.ScaleMode类。
player width="768" height="600" scaleMode="letterbox" isLive="false" autoPlay="true" updateInterval="250" hasCaptions="false"
- 保存文件。
- 运行应用程序 这个视频现在可以被以一种更加漂亮的信箱布局显式出来了。（见图11）。
图11. 在信箱格式下播放的视频
修改默认的MediaElement
按照以下的步骤来修改默认的MediaElement：
- 回到 reosmf_config.xml 文件中。
- 在mediaElement节点中修改media的值，将其从rtmp流式加载修改为渐进式视频加载。 将media 节点的url属性修改为下面显式的url:
- 保存文件。
- 运行应用程序 新的视频应该被播放出来（见图12）。
图12. 播放器播放不同的视频。
设置播放器皮肤
按照下面的步骤修改播放器的皮肤：
- 回到 reosmf_config.xml 文件中。
- 修改skin节点的path属性，从：
修改为：
注意：你也可以尝试使用Core.swf和Formula.swf皮肤文件。
- 保存文件。
- 运行应用程序 你应该可以看到一个不同的控制面板皮肤（见图13）。
图13播放器通过修改XML文件切换皮肤。
定位和自动隐藏控制条。
依照下面的步骤来定位和自动隐藏控制面板：
- 回到 reosmf_config.xml 文件中。
- 找到id为controlBar 的skinElement节点。
- 修改vAdjust属性的值为 －180：
- 将autoHide属性的值设置为true:
- 保存文件。
- 运行应用程序 控制条的位置现在被定位在视频的上方了（见图14）
图1 控制条被定位在视频上方的播放器。4
同样，如果你将鼠标从播放器区域移走，这个控制条应该会在片刻之后自动隐藏。 在你再次将鼠标移动到播放器区域时，控制条会再次出现。
部署REOPS播放器
部署REOPS播放器时一个非常简单的过程，只需要准备好所需的文件然后上传到你的web服务器即可。 部署REOPS你需要的最简化文件如下：
- 显示播放器的HTML页面
- 播放器的swf文件
- XML配置文件
- 皮肤的swf文件
如果你使用的是MyREOPS教程项目中的文件，你可以直接将bin-debug文件夹中的文件都上传到web服务器即可。
- assets/data文件夹中包含配置文件。
- assets/skin/文件夹中，包含了皮肤的 swf 文件（你可以移除不使用的swf文件）。
- MyREOPS.html
- MyREOPS.swf
- swfobject.js
我们还可以学到什么
RealEyes OSMF Player Sample也提供了一些内建的工具，使得使用OSMF框架开发媒体播放器变得更加有计划性和保持过程的一致性。 你应该已经了解了REOPS如何使用OSMF来创建一个可订制化的，高度灵活的媒体播放器。 使用可扩展的XML配置文件，你可以快速，且方便的配置一个单独的播放器，来满足不同的配置需求。
在这篇文章中，我们同样涵盖了使用OSMF创建媒体播放器的一些核心概念和组件。
- MediaPlayerSprite类
- MediaElements
- Traits
- MediaContainer
- MediaFacatory
- NetConnectionFactory
这个信息应该可以帮助你使用OSMF创建你自己的媒体播放器，即便你不使用REOPS项目作为你的开始点。
在第三部分中，我们将会详细解释控制面板，和REOPS项目内的皮肤系统。