WEB开发网
开发学院图形图像Flash Silverlight:拖动滚动条控制媒体播放 阅读

Silverlight:拖动滚动条控制媒体播放

 2007-12-27 11:16:44 来源:WEB开发网   
核心提示:本打算写完MediaPlay控件的拖动滚动条来控制媒体播放的功能,可惜在这里卡壳了,Silverlight:拖动滚动条控制媒体播放,我的拖放进度条的效果总是不理想,至到今晚上看到一段视频--DRAG AND DROP FUNCTIONALITY IN SILVERLIGHT 1.1才发现自己只不过少写了一行代码,从程序

本打算写完MediaPlay控件的拖动滚动条来控制媒体播放的功能,可惜在这里卡壳了。我的拖放进度条的效果总是不理想,至到今晚上看到一段视频--DRAG AND DROP FUNCTIONALITY IN SILVERLIGHT 1.1才发现自己只不过少写了一行代码。

不过Mediaplay控件我不打算再写下去了,因为微软公司在ASPNETFutures组件包里提供了asp:media组件,这个组件可以用在silverlight页面里,功能比我写的要强大,还支持换肤。

好了,如何通过拖动进度条来控制媒体播放呢?要用到silverlight里MediaElement的一个属性Position,它是一个timespan,设定它的值后就可以定位到你想要播放的时间点上。

如果找进度条和 MediaElement 的Position之间的关系呢。我们看下面的图:

Silverlight:拖动滚动条控制媒体播放

| <-- left --> | currentPosition: x |

|<------------------------------------totalLength------------------------->|

中间滚动条的位置left和滚动槽的总长度totalLength就对应着媒体播放当前时间点Position和媒体播放完所要的总时间NaturalDuration.

再讲一个知识点:获取所播放的媒体的总播放时间用MediaElement的NaturalDuration属性。

所以我们可以用这样的公式来表示:

以下是引用片段:
Position=(left/totalLength)*NaturalDuration

好了,解决了一个技术点,那么更重要的一个技术点是如何拖动滚动条呢?这涉及到三个鼠标事件:

MouseLeftButtonDown,MouseMove,MouseLeftButtonUp.也就是说当你用鼠标拖放一个东西的时候,首先要按下鼠标左键,然后拖放,拖放到指定的位置后就放开鼠标左键,从程序角度上讲这三个事件就先后发生了。

拖放的时候还要注意的一点是:为了捕获鼠标,我们要用到CaptureMouse()方法,放开鼠标左键的时候我们要释放鼠标ReleaseMouseCapture();

核心代码如下:以下是引用片段:
   // 点下鼠标左键
void TimeThumb_MouseLeftButtonDown( object sender,MouseEventArgse)
{
 
((System.Windows.Media.Visual)sender).CaptureMouse(); // 捕获鼠标
  
this .timelinePointStart = e.GetPosition(Parent as UIElement).X; // 获取鼠标的x坐标轴
      
  
TimeLinedrag =  true ; // 标识拖放操作开始 
        
}
// 移动鼠标
  
void TimeThumb_MouseMove( object sender,MouseEventArgse)
 
{
   
if (TimeLinedrag)
   
{
    
timelinePoinxEnd = e.GetPosition(Parent as UIElement).X;
    
Doubledelta = timelinePoinxEnd - timelinePointStart;
           
    
double left = ( double )TimeThumb.GetValue(Canvas.LeftProperty);
   
timelinePointStart = timelinePoinxEnd; // 我就是掉了这段代码
           
    
this .TimeThumb.SetValue(Canvas.LeftProperty,left + delta);
           
   
}
    
 
}
// 放开鼠标左键
 void TimeThumb_MouseLeftButtonUp( object sender,MouseEventArgse)
     {
  
      TimeLinedrag =  false ;
      
      this .videoWindow.Pause(); // 暂停播放
      
       double left = ( double )TimeThumb.GetValue(Canvas.LeftProperty);
      
       double rate = left / ( this .TimeSlider.Width - this .TimeThumb.Width); // 视频拖放到新位置在整个播放进度的比率
       long  ticks = Convert.ToInt64(rate *  this .videoWindow.NaturalDuration.TimeSpan.Ticks);
      
       this .videoWindow.Position = new TimeSpan(ticks);
     
       this .videoWindow.Play();
      
      ((System.Windows.Media.Visual)sender).ReleaseMouseCapture();
    }

Tags:Silverlight 拖动 滚动

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接