翻译：RealEyes OSMF Player Sample - 第二部分：建立和配置（转载）

最新推荐文章于 2024-08-28 08:44:31 发布

weixin_30307267

最新推荐文章于 2024-08-28 08:44:31 发布

阅读量121

点赞数

原文链接：http://www.cnblogs.com/chenhaib/archive/2011/11/17/2252474.html

版权

原文地址: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创建媒体播放器的一些核心概念和组件。