自制Silverlight视频播放器(一)-VideoPlayer视频播放控件

　　近期在赶一个客户的项目，采用Silverlight技术制作一个视频播放页面。目前版本基于SL 2 Beta 1开发，已初步完Demo版，现将开发所得经验分享如下：
　　效果图:

(播放视频)



(鼠标放在缩略图上，显示相关说明)



(鼠标放在视频名称上，显示相关说明)



(点击缩略图视频“翻跟头”进入播放区)



(点击缩略图视频“翻跟头”进入播放区)


页面浏览：http://cms.huadublog.cn/VodSL/VodSLTestPage.html


SL自定义控件经验分享

１、VideoPlayer视频播放控件
　　该控件主要功能有Play/Pause/Stop等，这些功能我认为比较简单，在此不提。主要说说如果通过Slider控件实现播放进度条的方法。
　　首先创建MediaElement与Slider。
　　然后分析下进度条的实现原理：
　　　　Ａ、如何实现Slider与播放进度的同步？答：为MediaElement设置TimelineMarker，将MarkerReached时修改Slider进度值。注意，一定要在MediaElement.MediaOpened事件中添加TimelineMarker。因为添加TimelineMarker要考虑影片的实际长度，比如说，如果想在Slider上设置100个点，那每一点代表的时间就是影片总长度的1/100。看看我的代码：

             this .slider.Minimum  =   0 ;
             this .slider.Maximum  =   100 ;
             double  seconds  =   this .mediaElement1.NaturalDuration.TimeSpan.TotalSeconds;
             for  ( int  i  =  ( int ) this .slider.Minimum; i  <  ( int ) this .slider.Maximum; i ++ )
             {
                TimelineMarker marker = new TimelineMarker();
                double time = seconds / this.slider.Maximum * i;
                marker.Time = new TimeSpan(0, 0, (int)time);
                marker.Text = "a";
                marker.Type = "Test";
                this.mediaElement1.Markers.Add(marker);
            }

　　在此需要注意的是，一定要设置marker.Type，否则您试试，一运行程序就崩溃了。呵呵。
　　好了，接下来在MediaElement.MarkerReached事件中添加以下代码：

             double  time =  e.Marker.Time.TotalSeconds;
             double  seconds =   this .mediaElement1.NaturalDuration.TimeSpan.TotalSeconds;
             if  (seconds  <=   0 )
             {
                return;
            }
             double  marker  =  (time  *   this .slider.Maximum  /  seconds);
            txtSlider.Text  =  e.Marker.Time.Hours  +   " : "   +  e.Marker.Time.Minutes  +   " : "   +  e.Marker.Time.Seconds;
             this .slider.Value  =  marker;

　　在此，我们根据当前Marker的时间点与总时长算出播放时间占总时间的比例，然后计算出Slider当前应该的进度值。就ＯＫ了，如果要显示当前时长的话，只要txtSlider.Text = e.Marker.Time.Hours + ":" + e.Marker.Time.Minutes + ":" + e.Marker.Time.Seconds;即可。

　　然后我们再实现进度条的拖拽功能。
　　在Slider.ValueChanged事件中添加以下代码：

             double  seconds  =   this .mediaElement1.NaturalDuration.TimeSpan.TotalSeconds;
             double  time  =  seconds  /   this .slider.Maximum  *   this .slider.Value;
            mediaElement1.Position  =   new  TimeSpan( 0 ,  0 ,( int ) time);

　　一切搞定！
　　不过细心的你可能会发现一个问题，那就是MediaElement.MarkerReaded可以改变Slider.Value，而Slider.Value的改变又会引发Slider.ValueChanged，该事件中又有MediaElement.Position=v，这又会引发MediaElement.MarkerReaded，呵呵，死循环吧，没关系，自己加一个信号变量就行了。这我不再详述了。