科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道基础软件设计silverlight的MediaPlay控件

设计silverlight的MediaPlay控件

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

大家都知道silverlight里用了获得艾美奖的新的视频编解码技术。视频质量无论从移动设备还是桌面浏览器都可以达到720p HDTV video模式。

作者:王传炜 来源:论坛整理 2007年11月2日

关键字: 设计 silver light Media Player 控件

  • 评论
  • 分享微博
  • 分享邮件
大家都知道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文件代码如下:

以下是引用片段:


<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    }

  然后我们在上次建的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}

查看本文来源

    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章