【IT168 技术文档】
大家都知道silverlight里用了获得艾美奖的新的视频编解码技术。视频质量无论从移动设备还是桌面浏览器都可以达到720p HDTV video模式。如果能用silverlight技术设计一个视频网站估计客户体验很不错的。
那我们就开始做一个最简单的MediaPlayer控件，能动态的传入视频的URI参数，还能控制视频的播放。
在上次我们建的silverlight控件类库项目里添加一个新的silverlight控件----MediaPlayControl.xaml.
做一个媒体播放器，难就难在界面设计上。如果要设计的简陋话，只需要在xaml文件里放上一个MediaElement和几个TextBlock就可以了，不过这样实在太丑陋了。我就用了Microsoft Expression Encoder 里面媒体播放器的界面，效果如下：
中间带摄像机图标的就是MediaElement ，几个按钮是由Canvas组成的。代码过长，请下载该文件
/Files/wangergo/MediaPlayControl.rar
那么如何控制视频的播放呢，这主要跟MediaElement有关系。
MediaElement有一个重要的属性是Source，它是指所要播放的媒体文件的Uri，也就是媒体文件的地址。
还有几个重要方法：Pause--暂停播放, Play--播放, Stop--停止.
xaml文件对应的.cs文件代码如下:
1/**//// <summary>
2 /// Desc:媒体播放器控件
3 /// Author:williams
4 /// Date:2007-9-27
5 /// </summary>
6 public class MediaPlayControl : Control
7 {
8
9 私有变量#region 私有变量
10 private FrameworkElement parentControl;
11 private Canvas timeline;
12 private Canvas playButton;
13 private Canvas pauseButton;
14 private Canvas stopButton;
15 private MediaElement videoWindow;
16 private string mediaUrl="";
17 #endregion
18
19 公有属性#region 公有属性
20 public string MediaUrl
21 {
22 get{return this.mediaUrl;}
23 set
24 {
25 this.mediaUrl = value;
26 Uri url = new Uri(this.mediaUrl, UriKind.Relative);
27 this.videoWindow.Source = url;
28 }
29 }
30 #endregion
31
32 构造函数#region 构造函数
33 public MediaPlayControl()
34 {
35 System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("SilverControls.MediaPlayControl.xaml");
36 parentControl = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());
37 this.playButton = parentControl.FindName("PlayButton") as Canvas;
38 this.pauseButton = parentControl.FindName("PauseButton") as Canvas;
39 this.stopButton = parentControl.FindName("StopButton") as Canvas;
40 this.videoWindow = parentControl.FindName("VideoWindow") as MediaElement;
41
42 this.playButton.MouseLeftButtonUp += new MouseEventHandler(playButton_MouseLeftButtonUp);
43 this.stopButton.MouseLeftButtonUp += new MouseEventHandler(stopButton_MouseLeftButtonUp);
44 this.pauseButton.MouseLeftButtonUp += new MouseEventHandler(pauseButton_MouseLeftButtonUp);
45
46 }
47
48 void pauseButton_MouseLeftButtonUp(object sender, MouseEventArgs e)
49 {
50 this.videoWindow.Pause();
51 }
52
53 void stopButton_MouseLeftButtonUp(object sender, MouseEventArgs e)
54 {
55 this.videoWindow.Stop();
56 }
57
58 void playButton_MouseLeftButtonUp(object sender, MouseEventArgs e)
59 {
60 this.Play();
61 }
62 #endregion
63
64 公有方法#region 公有方法
65 public void Play()
66 {
67 if(this.mediaUrl!=string.Empty)
68 {
69
70 this.videoWindow.Play();
71 }
72 }
73 #endregion
74 }
/**//// <summary>2
/// Desc:媒体播放器控件3
/// Author:williams4
/// Date:2007-9-275
/// </summary>6
public class MediaPlayControl : Control7
{8
9
私有变量#region 私有变量10
private FrameworkElement parentControl;11
private Canvas timeline;12
private Canvas playButton;13
private Canvas pauseButton;14
private Canvas stopButton;15
private MediaElement videoWindow;16
private string mediaUrl="";17
#endregion18
19
公有属性#region 公有属性20
public string MediaUrl21
{22
get{return this.mediaUrl;}23
set24
{25
this.mediaUrl = value;26
Uri url = new Uri(this.mediaUrl, UriKind.Relative);27
this.videoWindow.Source = url;28
}29
}30
#endregion31
32
构造函数#region 构造函数33
public MediaPlayControl() 34
{35
System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("SilverControls.MediaPlayControl.xaml");36
parentControl = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());37
this.playButton = parentControl.FindName("PlayButton") as Canvas;38
this.pauseButton = parentControl.FindName("PauseButton") as Canvas;39
this.stopButton = parentControl.FindName("StopButton") as Canvas;40
this.videoWindow = parentControl.FindName("VideoWindow") as MediaElement;41
42
this.playButton.MouseLeftButtonUp += new MouseEventHandler(playButton_MouseLeftButtonUp);43
this.stopButton.MouseLeftButtonUp += new MouseEventHandler(stopButton_MouseLeftButtonUp);44
this.pauseButton.MouseLeftButtonUp += new MouseEventHandler(pauseButton_MouseLeftButtonUp);45
46
}47
48
void pauseButton_MouseLeftButtonUp(object sender, MouseEventArgs e)49
{50
this.videoWindow.Pause();51
}52
53
void stopButton_MouseLeftButtonUp(object sender, MouseEventArgs e)54
{55
this.videoWindow.Stop();56
}57
58
void playButton_MouseLeftButtonUp(object sender, MouseEventArgs e)59
{60
this.Play();61
} 62
#endregion63
64
公有方法#region 公有方法65
public void Play()66
{67
if(this.mediaUrl!=string.Empty)68
{69
70
this.videoWindow.Play();71
}72
}73
#endregion74
}然后我们在上次建的silverlight项目里的page.xaml.cs文件的page_loaded事件里调用我们做的控件。
1 public void Page_Loaded(object o, EventArgs e)
2 {
3 // Required to initialize variables
4 InitializeComponent();
5
6 double top = 100;
7
8 double left = 20;
9
10 MediaPlayControl media = new MediaPlayControl();
11
12 media.MediaUrl = "wow.wmv";
13
14 media.SetValue<double>(Canvas.TopProperty, top);
15
16 media.SetValue<double>(Canvas.LeftProperty, left);
17
18 this.Children.Add(media);
19}
public void Page_Loaded(object o, EventArgs e)2
{3
// Required to initialize variables4
InitializeComponent();5
6
double top = 100;7
8
double left = 20;9
10
MediaPlayControl media = new MediaPlayControl();11
12
media.MediaUrl = "wow.wmv";13
14
media.SetValue<double>(Canvas.TopProperty, top);15
16
media.SetValue<double>(Canvas.LeftProperty, left);17
18
this.Children.Add(media);19
}
