在Silverlight3中使用SSME重现Big Buck Bunny播放器

在Silverlight3中使用SSME重现Big Buck Bunny播放器2010-11-12 博客园 Jaxu在上一讲中（在Silverlight中使用SmoothStreamingMediaElement创建Smooth Streaming播放器）我向大家详细介绍了在Silverlight3中如何使用SmoothStreamingMediaElement（SSME）控件编写一个支持 Smooth Streaming视频流的播放器，正如你所看到的，那个播放器非常简陋，除了没有亮丽的外观外，功能也很简单，当然，你可以继续在界面上添加一些控件元素来丰富播放器的功能，例如前进、后退、左右声道、全屏等等，其实这些功能普通的MediaElement控件就已经全部支持了，你只需要自己编写简单的逻辑加以控制就OK了，也比较简单。本文要讨论的重点并不是如何添加这些功能，而是如何实现Big Buck Bunny播放器中实时跟踪Smooth Streaming视频流播放状态的浮动面板，下面是我们要模仿的效果：

大家可以看到播放器上有三个浮动的面板，分别显示了当前视频播放时的帧率、比特率，以及可以自定义视频播放时的比特率。我们已经了解了Smooth Streaming技术的原理，它可以根据客户端请求的带宽动态传输不同质量的视频，当网路状态良好时播放的视频质量较高，当网络状态较差时播放的视频质量就比较差，从而保证了视频播放的流畅性。官方网站上有专门介绍Smooth Streaming技术的相关资料，同时你也可以在微软的msdn上找到有关SSME控件的一些内容，在开始这些之前你需要下载Smooth Streaming SDK。这些步骤我在前面的两篇文章中都已经详细介绍过，感兴趣的读者可以参考下。

http://www.cnblogs.com/jaxu/archive/2010/01/08/1642143.html

http://www.cnblogs.com/jaxu/archive/2010/01/21/1653314.html

SDK中包含的内容只适合做演示，并不包含示例播放器的源代码，如果你打算重构该播放器，只能自己动手去模仿了，但其实我们有一些捷径可以走。还记得我在前一篇文章中向大家介绍的Reflector反编译工具吗？里面的SilverlightBrowser插件，我们可以对SDK中的示例播放器进行反编译，以查看它是如何实现那三个浮动面板的。

在对反编译后的代码进行研究后发现，帧率和比特率的跟踪面板其实都是Silverlight自定义控件，这样我们只要在我们的工程中引入相应的 dll文件，就可以直接使用它们。至于比特率设置面板，其实就是两个Silder控件，通过Value_Changed事件来对Smooth Streaming播放进行控制。下面是我反编译并经过整理后的代码，大家可以先下载下来研究一下。使用的时候客户端引用xap时的参数可以参照skd中的示例。

这里有一个问题，那就是代码中的mainPlayer是一个自定义控件，而且从反编译的情况来看，要想重构基本不可能（结构比较复杂，类很多，重构的代价太大）。其实这个自定义控件中不外乎用到了SSME，既然这样的话，我们不如直接将其替换成SSME，然后将代码稍微改动一下就可以了。整个代码应该很简单，因为都是基于反编译的结果，自己只需要将一些有用的代码整理一下就行了。我在这里稍做一下解释。

1. MainPage.xaml和App.xaml文件中有一些需要的样式要添加到你工程中对应的文件里。

2. MainPage.xaml文件里有关三个面板的布局代码需要添加到你工程中相应的地方。

3. 后台代码可以直接用我提供的。包括一些私有成员变量的定义，UpdateControlReferences方法，FindVisualElementFrom方法，LimitMaxBitrateSlider_ValueChanged事件，OnTimerCompleted事件，和对SmoothPlayer_MediaOpened事件的补充。