OSMF第一步

这篇博文命名为“OSMF第一步”的确俗了点，市面上叫“第一步”的书刊杂志太多了，我不愿意花10分钟去为一篇文章想一个更吸引人的标题，算了，就这么将就吧，这篇技术文章，咱们尽量用轻松的，容易理解的方式来讲明白一些事情，尽管里面的知识点可能来自于有关于OSMF的帮助，指南，Release Notes，语法指南这些资料，但是与那些非常详细的文档来比，我这篇文章可能更轻松一些。
在开始探索OSMF之前，先说一个英文单词，是“trait”，大致上与“characteristic”，就是特征和特点的意思。如果你频繁的接触 OSMF的使用和开发，你就会频繁的遇到“trait”这个词出现在你的类，接口等定义中，所以，学习OSMF的第一大好处就是你最后如果什么都没学会或者什么都忘了，你还收获了一个新的英文单词。:D

上一篇文章我们已经大致讲了OSMF的目的和要解决的问题，以及简单的贴了一张关于它的架构（非常简要）。OSMF这个框架是面向Flash Player 10和更高版本的，好了，如果你现在还在用Flash Player 9，可以看到这里就打住了。OSMF在Flash Player 10上支持的媒体格式相当的广泛，这里给大家列一下：

• 流媒体格式的音频，包括mp3,AAC*,Speex和Nellymoser格式
• 流媒体格式的视频，包括FLV,F4V,MP4,MPEG-4的MP4,F4V和3GPP
• 渐进式音频，就是mp3
• 渐进式视频，包括FLV,F4V,MP4,MP4V-ES,M4V,3GPP,3GPP2,QuickTime
• 图形文件，格式包括PNG, GIF, JPG
• SWF文件

关于MPEG4和MP4的详细解释，你可以参考这里。
OSMF是个纯粹基于ActionScript3的应用媒体框架，里面没有任何Flex相关的API，开发工具我推荐你使用Flash Builder 4或者FlashDevelop。下载OSMF的页面是：http://opensource.adobe.com/wiki/display/osmf /Downloads，其中source zip文件解压后，你会看到OSMF的包资源结构，而这里要强调的是，如果我们使用OSMF框架，zip根目录下的MediaFramework.swc 文件是至关重要的一个，你要做的开发前的工作就是将swc文件放入你IDE开发环境的Library路径下配置完。什么？还没明白该如何配置?好吧，看这里（Flash Builder 4)的配置过程：
建立一个ActionScript Project（名字自己决定），然后在项目属性的配置窗口里，找到ActionScript Build Path选项，在里面选择Library Path，然后Add SWC，把MediaFramework.swc加入项目的库路径以供使用。下图是配置的示例图：

接下来，我们用一个简单的示例，来演示你是如何调用OSMF框架的，这是一段非常非常简单的代码，是来自于OSMF框架调用的第一个示例，我们几乎不用改动任何东西，只需要给出一段渐进式下载的FLV地址（我用了Youku网友上传的一段Avatar电影使用Adobe软件制作的视频，Avatar实在太火了。）：

package
{
  import flash.display.Sprite;
  //引入MediaPlayerSprite类
  import org.osmf.display.MediaPlayerSprite;
  import org.osmf.media.URLResource;
  import org.osmf.net.NetLoader;
  import org.osmf.utils.URL;
  import org.osmf.video.VideoElement;
  
  /**
   * 可能是最简单的OSMF框架范例
   * 
   * The metadata sets the SWF size to match that of the video.
   **/
  [SWF(width="640", height="352")]
  public class HelloOSMF extends Sprite
  {
    public function HelloOSMF()
    {
      //创建一个Displaylist上的Sprite，以此来作为MediaPlayer的播放容器，值得我们高兴的是，OSMF连MediaPlayerSprite都给做好了。:)
      var sprite:MediaPlayerSprite = new MediaPlayerSprite();
      addChild(sprite);
      
      //设定MediaPlayer上的媒体元素，因为自动播放autoPlay属性默认值是true，所以只要加载影片，就会自动放映了
      sprite.element = new VideoElement(new NetLoader,new URLResource(new URL(REMOTE_PROGRESSIVE)));
    }
    
    //加载一段来自Youku的视频
    private static const REMOTE_PROGRESSIVE:String
    = "http://59.175.136.209/1772AA58F7B49832E03CED28CF/03000201004B53CC6BC0E10108E7E6992CA757-ADCD-1881-882D-9BBD0FED99A0.flv";
  }
}


你可以自己尝试着按照上面的代码尝试编译后播放一下，我这里播放该范例的截图：

这里有一点要注意的，如果你使用的OSMF版本是0.8以前的版本，需要将代码中的element属性换成mediaElement，如果是0.8，就用sprite.element好了，因为OSMF的0.8版本对于某些类，接口，属性名称都进行了大规模的调整。
接下来，我们就来解释一下上面的代码中的一些关于OSMF的播放器的基础概念。首先，出现的是MediaPlayer这个类，顾名思义，这就是一个借助 OSMF来实现基础媒体播放的播放器类，它属于客户端类，而且可以供开发者直接调用或声明子类时使用，通过它初始的媒体播放器，可以播放OSMF支持的所有媒体类型，同时也可以玩第三方扩展（另外一个重要的开源项目OVP就是这么跟OSMF配合的）。做为初学者，你所要知道的就是将MediaPlayer 封装到一个MediaPlayerSprite容器里去，目的是要让播放器在显示列表上能被我们看到（媒体播放器不能显示出来，还玩什么啊）。接下来就是为播放器指定媒体播放元素，比如是不是视频元素，因此就有了sprite.element这个属性是VideoElement的代码。最后是指定播放器的一些特征，比如播放，暂停啥的，这个示例只不过还没有添加而已。
接下来是细化一下媒体类型，就是“sprite.element”的初始化，上面的代码是指定为VideoElement，在OSMF中，有三种媒体元素类型，分别是：VideoElement，ImageElement和AudioElement。实际的初始化步骤是：

var video = new VideoElement(param...);
sprite.element=video;


说白了，就是告诉媒体播放器要播放什么类型的媒体。
VideoElement实例在初始化的过程中，又可以指定是元素来自于网络，是渐进式下载还是流媒体播放。而范例代码的最后一段则是通过硬编码给媒体播放器的一个静态常量，也就是地址，指定一个网络上的FLV资源地址，这种方法虽然最笨（开发播放器不能这样硬编码），但是作为示例却是最直观。 REMOTE_PROGRESSIVE是字符串类型，目的就是告诉媒体播放器，渐进式下载的媒体URL地址。
怎么样，你也可以通过上面的简单解释来玩一玩OSMF了，今天就到这里，我要去干非技术的活了，以后继续。