拖动MediaPlay控件的滚动条来控制媒体播放--silverlight(银光)学习(4)
2008-01-26 10:36
302 查看
10.1 本打算写完MediaPlay控件的拖动滚动条来控制媒体播放的功能,可惜在这里卡壳了。我的拖放进度条的效果总是不理想,至到今晚上看到一段视频--DRAG AND DROP FUNCTIONALITY IN SILVERLIGHT 1.1才发现自己只不过少写了一行代码。
不过Mediaplay控件我不打算再写下去了,因为微软公司在ASPNETFutures组件包里提供了asp:media组件,这个组件可以用在silverlight页面里,功能比我写的要强大,还支持换肤。
好了,如何通过拖动进度条来控制媒体播放呢?要用到silverlight里MediaElement的一个属性Position,它是一个timespan,设定它的值后就可以定位到你想要播放的时间点上。
如果找进度条和 MediaElement 的Position之间的关系呢。我们看下面的图:
| <-- left --> | currentPosition: x |
|<------------------------------------totalLength------------------------->|
中间滚动条的位置left和滚动槽的总长度totalLength就对应着媒体播放当前时间点Position和媒体播放完所要的总时间NaturalDuration.
再讲一个知识点:获取所播放的媒体的总播放时间用MediaElement的NaturalDuration属性。
所以我们可以用这样的公式来表示:
Position = (left/totalLength)*NaturalDuration
好了,解决了一个技术点,那么更重要的一个技术点是如何拖动滚动条呢?这涉及到三个鼠标事件:
MouseLeftButtonDown,MouseMove,MouseLeftButtonUp.也就是说当你用鼠标拖放一个东西的时候,首先要按下鼠标
左键,然后拖放,拖放到指定的位置后就放开鼠标左键,从程序角度上讲这三个事件就先后发生了。
拖放的时候还要注意的一点是:为了捕获鼠标,我们要用到CaptureMouse()方法,放开鼠标左键的时候我们要释放鼠标ReleaseMouseCapture();
核心代码如下:
//点下鼠标左键
void TimeThumb_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
((System.Windows.Media.Visual)sender).CaptureMouse();//捕获鼠标
this.timelinePointStart = e.GetPosition(Parent as UIElement).X;//获取鼠标的x坐标轴
TimeLinedrag = true;//标识拖放操作开始
}
//移动鼠标
void TimeThumb_MouseMove(object sender, MouseEventArgs e)
{
if (TimeLinedrag)
{
timelinePoinxEnd = e.GetPosition(Parent as UIElement).X;
Double delta = timelinePoinxEnd - timelinePointStart;
double left = (double)TimeThumb.GetValue(Canvas.LeftProperty);
timelinePointStart = timelinePoinxEnd;//我就是掉了这段代码
this.TimeThumb.SetValue( Canvas.LeftProperty, left+delta);
}
}
//放开鼠标左键
void TimeThumb_MouseLeftButtonUp(object sender, MouseEventArgs e)
{
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();
}
源代码下载:/Files/wangergo/MediaPlayControlDrag.rar
本文版权属于www.80back.com,williams所有,转载请注明出处。
不过Mediaplay控件我不打算再写下去了,因为微软公司在ASPNETFutures组件包里提供了asp:media组件,这个组件可以用在silverlight页面里,功能比我写的要强大,还支持换肤。
好了,如何通过拖动进度条来控制媒体播放呢?要用到silverlight里MediaElement的一个属性Position,它是一个timespan,设定它的值后就可以定位到你想要播放的时间点上。
如果找进度条和 MediaElement 的Position之间的关系呢。我们看下面的图:
| <-- left --> | currentPosition: x |
|<------------------------------------totalLength------------------------->|
中间滚动条的位置left和滚动槽的总长度totalLength就对应着媒体播放当前时间点Position和媒体播放完所要的总时间NaturalDuration.
再讲一个知识点:获取所播放的媒体的总播放时间用MediaElement的NaturalDuration属性。
所以我们可以用这样的公式来表示:
Position = (left/totalLength)*NaturalDuration
好了,解决了一个技术点,那么更重要的一个技术点是如何拖动滚动条呢?这涉及到三个鼠标事件:
MouseLeftButtonDown,MouseMove,MouseLeftButtonUp.也就是说当你用鼠标拖放一个东西的时候,首先要按下鼠标
左键,然后拖放,拖放到指定的位置后就放开鼠标左键,从程序角度上讲这三个事件就先后发生了。
拖放的时候还要注意的一点是:为了捕获鼠标,我们要用到CaptureMouse()方法,放开鼠标左键的时候我们要释放鼠标ReleaseMouseCapture();
核心代码如下:
//点下鼠标左键
void TimeThumb_MouseLeftButtonDown(object sender, MouseEventArgs e)
{
((System.Windows.Media.Visual)sender).CaptureMouse();//捕获鼠标
this.timelinePointStart = e.GetPosition(Parent as UIElement).X;//获取鼠标的x坐标轴
TimeLinedrag = true;//标识拖放操作开始
}
//移动鼠标
void TimeThumb_MouseMove(object sender, MouseEventArgs e)
{
if (TimeLinedrag)
{
timelinePoinxEnd = e.GetPosition(Parent as UIElement).X;
Double delta = timelinePoinxEnd - timelinePointStart;
double left = (double)TimeThumb.GetValue(Canvas.LeftProperty);
timelinePointStart = timelinePoinxEnd;//我就是掉了这段代码
this.TimeThumb.SetValue( Canvas.LeftProperty, left+delta);
}
}
//放开鼠标左键
void TimeThumb_MouseLeftButtonUp(object sender, MouseEventArgs e)
{
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();
}
源代码下载:/Files/wangergo/MediaPlayControlDrag.rar
本文版权属于www.80back.com,williams所有,转载请注明出处。
相关文章推荐
- 拖动MediaPlay控件的滚动条来控制媒体播放--silverlight(银光)学习(4)
- 设计silverlight的MediaPlay控件--silverlight(银光)学习(3)
- 设计silverlight的MediaPlay控件--silverlight(银光)学习(3)
- SilverLigth 学习笔记--控制 Silverlight控件样式(转)
- OpenCV学习-第二章-视频播放控制-支持滚动条随着视频播放自动移动
- 关于Silverlight控件中ScrollViewer控件的滚动条控制
- Silverlight学习笔记-控件拖动注意项
- Silverlight之ScrollViewer控件的水平和竖直滚动条位置控制
- 学习javacv之八:拖动进度条,控制播放视频
- SilverLigth学习笔记--控制 Silverlight控件样式(转)
- 设计一个silverlight的Button控件--silverlight(银光)学习(1)
- 怎么控制媒体播放(<audio><video>)
- [Silverlight]使用新的MediaPlayer控件播放YouTube上的高清视频
- Silverlight学习笔记三:表格控件DataGrid
- SilverLight-WebBrowser控件学习
- Ajax Toolkit 控件学习系列(13) ——FilteredTextBoxExtender 控制输入
- 从零开始学习音视频编程技术(十) FFMPEG Qt视频播放器之播放控制
- 日积(Running)月累(ZSSURE):WCF学习之“通过事件绑定控制WinForm宿主程序主界面控件”
- 猎豹MFC--MCI媒体控制接口--播放各种音频视频录音
- OpenCV学习笔记(9)利用MFC的Picture控件显示图像+播放视频和捕获摄像头画面