-
在Silverlight中使用SmoothStreamingMediaElement创建Smooth Streaming播放器
我在“IIS 7 Smooth Streaming技术在Silverlight 3中的应用 ”一文中详细介绍了有关IIS 7、Smooth Streaming技术以及如何在Silverlight中使用MediaElement控件播放Smooth Streaming视频的内容，在继续本文之前，如果你对什么是Smooth Streaming还存在疑问，你可以先去看看我的那篇文章，也算作是一个入门吧。
在本文中，我将向大家介绍一个新控件——SmoothStreamingMediaElement，也被称之为SSME，它是IIS Smooth Streaming Player Development Kit工具包中的一个Silverlight控件，是在原MediaElement控件基础上的功能加强，主要增加了对Smooth Streaming视频源的直接支持以及一些相关事件。大家可以去微软的官方站点上下载该工具包，目前已经出到Beta2版了。
在上一文中我向大家介绍了如何利用现有的MediaElement控件来支持Smooth Streaming视频的播放，事实上这种方法具有很大的局限性，例如控制播放进度、添加视频播放时的tracing事件等等。SmoothStreamingMediaElement控件作为MediaElement控件的一个加强版本，正好弥补了这方面的不足，同时，该控件也支持普通视频文件的播放。你当然还记得Smooth Streaming官方站点上的那个Big Buck Bunny演示影片，或许你也想知道它是怎么实现的，不要着急，在接下来的一系列文章中将会花点篇幅来向大家介绍，今天我们主要看看如何使用SSME控件，因为Big Buck Bunny的核心控件就是SSME。
需要些什么
1. 既然是开发一个Silverlight工程，那么首先Visual Studio和Silverlight Tool kits是肯定需要的，这点我就不详细介绍了，相信大家的这个环境都是具备的，如果不具备，可以去微软官网上找相关的资源。
2. IIS Smooth Streaming Player Development Kit。目前的版本应该是Beta2版，下载后安装，你会发现Microsoft.Web.Media.SmoothStreaming.dll，这个正是我们所需要的。
3. 另外就是一些开发Silverlight所要具备的知识了，如果你从未开发过Silverlight程序并且对Silverlight一无所知，那么我建议你不要继续往下看了。
如何开始
现在我们应该就可以着手开始我们的工程了。首先在Visual Studio中创建一个Silverlight工程，如下图。
然后将Microsoft.Web.Media.SmoothStreaming.dll拷贝到你Silverlight工程的Bin\Debug\目录下（注意在Visual Studio中创建Silverlight项目时会同时创建一个用来进行测试的Web项目，不用将该文件复制到Web项目的Bin目录下），将该类库引用到Silverlight工程中。
然后我们需要将SSME控件添加到MainPage.xaml页面上，有两种方法，第一种方法是在Visual Studio的工具箱中单击右键-“选择项”，在弹出的对话框中选择“Silverlight组建”选项卡，然后点击“浏览”，找到Microsoft.Web.Media.SmoothStreaming.dll文件，确定并关闭对话框，这时控件SSME会出现在Visual Studio的工具箱中，你可以直接将该控件拖放到页面上。这和在Visual Studio中添加普通的ASP.NET自定义控件是一样的。
熟悉下SSME控件的常用属性和事件
有必要先向大家介绍下SSME控件中一些常用的属性和事件，由于该控件没有包含在任何一个版本的Silverlight标准类库中，目前还只是一个测试版，所以微软官方提供的资料很少，在msdn上虽然能够见到它的身影，但是几乎没有任何示例和相关解释，读者可以查看一下它都包含哪些东西，http://msdn.microsoft.com/en-us/library/microsoft.web.media.smoothstreaming.smoothstreamingmediaelement_members.aspx。在这里我给出一些常用的属性和方法，如果你对MediaElement控件很熟悉，那么非常好，你可以毫不费力地过渡到SSME上，因为SSME几乎支持了MediaElement控件的全部属性和方法。
AutoPlay：与MediaElement不同，除非你显示指定AutoPlay的值为True，否则即使SSME已经成功打开的视频源也不会自动播放视频。
Source：播放普通视频文件时的地址。
SmoothStreamingSource：播放Smooth Streaming视频文件时的地址。
VideoPlaybackTrack.Bitrate：通过该值可以得到SSME当前播放影片的比特率，如果SSME当前播放的是Smooth Streaming格式的影片，那么比特率会随网络带宽动态发生变化。
VideoDownloadTrack.Bitrate：同样的，通过该值可以得到当前下载影片的比特率。
RenderedFramesPerSecond：通过该值可以得到当前播放影片的帧率（即每秒播放多少帧）。
PlaybackTrackChanged：当播放影片的比特率发生变化时触发。
DownloadTrackChanged：当下载影片的比特率发生变化时触发。
细心的读者是否已经发现，我们通过上面给出的这些属性和事件，加上Silverlight里的路径动画，是不是就可以构造一个类似于Big Buck Bunny的播放器呢？先别着急，我们还是先熟悉熟悉SSME吧，我打算在下一篇文章中再来介绍那个让人找摸不透的播放器呢。
继续完善我们的SSME播放器
接着进行我们的工程。知道如何在工程中加入SSME了，下面你可以试着将这段代码复制到你的MainPage.xaml页面中。
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0.90*"></RowDefinition>
<RowDefinition Height="0.05*"></RowDefinition>
<RowDefinition Height="0.05*"></RowDefinition>
</Grid.RowDefinitions>
<SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" SmoothStreamingSource="http://localhost:77/Wildlife.ism/manifest" Grid.Row="0"/>
</Grid>
</UserControl>
注意SmoothStreamingSource的值应当指定为一个你事先已经准备好的Smooth Streaming视频源，如果这个视频源不在本地，你可能需要添加跨域访问的代码，有关如何创建Smooth Streaming视频源以及如何架设Smooth Streaming视频服务，请参考“IIS 7 Smooth Streaming技术在Silverlight 3中的应用”一文。
好了，按下F5，启动工程直接查看效果，你会发现浏览器中除了一块黑色外并没有播放你所指定的影片，怎么回事啊？难道视频地址给错了？首先请确保你所给出的地址可以通过浏览器直接访问，得出的结果应该类似于下面这样的画面：
如果不能通过浏览器直接访问，那你就要检查你的视频服务了，或许你需要通过Expression Encoder重新转换视频并发布到IIS 7上。如果可以通过浏览器直接访问，那么恭喜你，你所看到的黑色画面是正常的。还记得我在上一文中说过调试Smooth Streaming播放器时只能通过IIS 7，而不能直接通过Visual Studio或者Blend吗？所以你不得不在你机器的IIS 7上部署一个Web站点，然后将用来进行测试的Web工程中的所有文件复制到Web站点中，然后通过浏览器进行访问。
如果一切顺利的话，你应该可以在你的浏览器中看到影片了，仔细观察影片，你会看到一开始的时候画面是比较模糊的，但是SSME可以根据网络带宽动态调整画面质量，随着影片的播放，你会发现画面越来越清晰了。如果你仍然看不到影片，可能会有几个原因，首先还是视频服务的问题，你需要重新去确认视频服务是否可用并能正常访问；然后是权限的问题，你可以试着将浏览器地址中的localhost改为你的机器名，然后重新刷新浏览器，或者修改Silverlight工程中SSME的SmoothStreamingSource的地址，将其中的localhost改为你的机器名（如果你使用的是本地的视频源），如果视频源和Web站点都在同一台机器上，你应该同时使用localhost或是机器名。下面是在我本地看到的影片的播放效果：
添加播放控制部分
当然，一个像样的播放器是需要有播放控制面板的，我打算在我们的SSME播放器上添加一个播放进度条、音量控制、开始/暂停按钮、停止按钮。添加控件后的xaml代码如下：
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:SSME="clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming"
mc:Ignorable="d" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" x:Class="SmoothStreamingPlayer.MainPage"
d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0.90*"/>
<RowDefinition Height="0.05*"/>
<RowDefinition Height="0.05*"/>
</Grid.RowDefinitions>
<SSME:SmoothStreamingMediaElement AutoPlay="True" x:Name="SmoothPlayer" Grid.Row="0"/>
<Slider x:Name="playSlider" Grid.Row="1" Cursor="Hand" Maximum="100"/>
<ToggleButton x:Name="playToogleButton" Grid.Row="2" HorizontalAlignment="Left" Margin="8,0,0,4" Width="33" Content="暂停" Height="20" Cursor="Hand"/>
<Slider Margin="115,4,0,8" Grid.Row="2" HorizontalAlignment="Left" Width="65" x:Name="volumeSlider" Cursor="Hand" Maximum="1" Value="{Binding Path=Volume, ElementName=SmoothPlayer, Mode=TwoWay}" />
<dataInput:Label HorizontalAlignment="Left" Margin="87,3,0,5" Width="29" Grid.Row="2" Content="音量"/>
<Button x:Name="stopButton" HorizontalAlignment="Left" Margin="45,0,0,4" Grid.Row="2" Content="停止" Width="33" Height="20" Cursor="Hand"/>
</Grid>
</UserControl>
SSME的SmoothStreamingSource改到后台去指定了，为的是方便在Blend中打开Silverlight工程，因为Blend会默认在页面打开的时候自动加载视频并生成缩略图，由于我们指定的播放地址不是普通地址，视频加载的时候Blend会报错，导致页面无法在Blend中打开。
UI界面已经完成了，尽管比较难看！说老实话，我也不是美工出身，对界面这方面也不是很在行。下面的工作就是让这些控件能够发挥作用，我将我的代码给出来，大家可以做个参考。
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;
namespace SmoothStreamingPlayer
{
public partial class MainPage : UserControl
{
private const string VIDEOSOURCE = "http://localhost:77/Wildlife.ism/manifest";
private TimeSpan _duration;
public MainPage()
{
InitializeComponent();
InitialPlayer();
}
//初始化属性和事件
private void InitialPlayer()
{
this.SmoothPlayer.SmoothStreamingSource = new Uri(VIDEOSOURCE);
//this.SmoothPlayer.Source = new Uri(VIDEOSOURCE);
this.playToogleButton.Click += new RoutedEventHandler(playToogleButton_Click);
this.stopButton.Click += new RoutedEventHandler(stopButton_Click);
this.playSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(playSlider_ValueChanged);
this.SmoothPlayer.MediaOpened += new RoutedEventHandler(SmoothPlayer_MediaOpened);
this.SmoothPlayer.MediaEnded += new RoutedEventHandler(SmoothPlayer_MediaEnded);
this.SmoothPlayer.MarkerReached += new TimelineMarkerRoutedEventHandler(SmoothPlayer_MarkerReached);
}
//拖动播放进度条
void playSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
double time = _duration.TotalSeconds / playSlider.Maximum * playSlider.Value;
this.SmoothPlayer.Position = new TimeSpan(0, 0, (int)time);
}
//停止播放
void stopButton_Click(object sender, RoutedEventArgs e)
{
this.SmoothPlayer.Stop();
playSlider.Value = 0;
playToogleButton.IsChecked = true;
playToogleButton.Content = "播放";
}
//播放/暂停
void playToogleButton_Click(object sender, RoutedEventArgs e)
{
ToggleButton button = (ToggleButton)sender;
if (button.IsChecked == true && this.SmoothPlayer.CanPause)
{
this.SmoothPlayer.Pause();
this.playToogleButton.Content = "播放";
}
if (button.IsChecked == false)
{
this.SmoothPlayer.Play();
this.playToogleButton.Content = "暂停";
}
}
//控制播放进度条
void SmoothPlayer_MarkerReached(object sender, TimelineMarkerRoutedEventArgs e)
{
this.Dispatcher.BeginInvoke(delegate()
{
double time = e.Marker.Time.TotalSeconds;
double seconds = this.SmoothPlayer.NaturalDuration.TimeSpan.TotalSeconds;
if (seconds <= 0)
{
return;
}
double marker = (time * playSlider.Maximum / seconds);
playSlider.Value = marker;
});
}
//影片播放完后停止播放器并重置进度条
void SmoothPlayer_MediaEnded(object sender, RoutedEventArgs e)
{
this.SmoothPlayer.Stop();
playSlider.Value = 0;
playToogleButton.IsChecked = true;
playToogleButton.Content = "播放";
}
//影片打开后初始化进度条
void SmoothPlayer_MediaOpened(object sender, RoutedEventArgs e)
{
_duration = this.SmoothPlayer.NaturalDuration.HasTimeSpan ? this.SmoothPlayer.NaturalDuration.TimeSpan : TimeSpan.FromMilliseconds(0);
this.SmoothPlayer.Volume = 0.8;
playSlider.Minimum = 0;
playSlider.Maximum = 10;
for (int i = (int)playSlider.Minimum; i < (int)playSlider.Maximum; i++)
{
TimelineMarker marker = new TimelineMarker();
double time = _duration.TotalSeconds / playSlider.Maximum * i;
marker.Time = new TimeSpan(0, 0, (int)time);
marker.Text = string.Empty;
marker.Type = string.Empty;
this.SmoothPlayer.Markers.Add(marker);
}
}
}
}
其中播放进度条的控制使用了TimelineMarker，由于我要播放的影片是Win7自带的一个高清视频演示文件，播放时长比较短，所以我将Maximum的值设得比较小，你可以根据影片的长短来设定该值。另外，我在程序中将播放地址hard-code到代码里了，你完全可以通过页面上的InitParams参数将播放地址传进来，也或者你可以将播放参数写到playlist里作为xml传进来。
好了，一切搞定！现在你可以在浏览器中预览SSME播放器啦，下面是在我机器上看到的效果。
结语
使用SSME可以非常方便地支持Smooth Streaming视频的播放，Silverlight程序员几乎不用做任何额外的工作就可以让自己的Silverlight播放器支持Smooth Streaming视频流，同时，你可以在程序中做出判断以决定让SSME播放普通的视频还是Smooth Streaming视频。接下来的内容我将向大家介绍如何利用SSME并结合FrameRateGraph、BitrateGraph等控件实现一个完整的Big Buck Bunny播放器。
出处：https://www.cnblogs.com/jaxu/archive/2010/01/21/1653314.html
