zoukankan      html  css  js  c++  java
  • 拖动MediaPlay控件的滚动条来控制媒体播放silverlight(银光)学习(4)

         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
       本文版权属于王传炜所有,首发http://www.cnblogs.com/,转载请注明出处。
  • 相关阅读:
    vue获取下拉框值
    vue子父组件通信
    内存堆栈问题
    Object.defineProperty()--数据劫持原理
    call和apply和bind的区别
    Object.create()和new object()和{}的区别
    Object.keys()/Object.values()的简单理解
    object.assign
    泛型的定义、使用
    ts 泛型
  • 原文地址:https://www.cnblogs.com/wangergo/p/925487.html
Copyright © 2011-2022 走看看