Silverlight視頻播放器

播放服務器端的視頻

    

圖2-4 自定義的Silverlight視頻播放器

       這個實例設計了1個自定義的Silverlight視頻播放器（視頻源文件放在服務器端），如圖2-4所示，這個示例徹底在Expression Blend 4中設計，視頻放在服務器端的文件夾中，網上調試成功。示例設計的複雜一點，固然功能也強，若是減小功能程序也會簡單。圖2-4上方是視頻播放控件MediaElement（me）；下方是須要播放的視頻圖片，點擊能夠選擇視頻源；中間有1個視頻播放控制面板，Silverlight視頻控件MediaElement有邊下載邊播放的功能，圖2-5中間有個播放進度條，同時顯示下載進度和播放進度；進度條上方的2個文本分別顯示下載緩衝比例和播放器的當前狀態，進度條下方的文本框顯示視頻播放的時間進度值；進度條上方右側有1個三角形音量控制圖標，點擊就能夠選擇音量，喇叭圖標是「靜音」控制圖標，點擊1次變化1次，靜音時喇叭圖標上出現1個紅色「×」；

 

圖2-5 自定義的Silverlight視頻播放器控制板

    當鼠標懸浮在進度條上時，先出現文本（Callout控件）顯示，顯示進度條當前值對應的視頻時間，只要鼠標懸浮不動就會出現1個視頻預覽窗口（也是MediaElement控件，名爲preview），能夠看到此時對應的視頻畫面（反覆播放當前畫面2秒，僅幾幀）；進度條下方有「暫停」、「播放」、「中止」、「重播」和「全屏」等控制圖標。下面說明設計過程。

1、界面設計

    新建1個「Silverlight應用程序+網站」項目，名稱爲SilverlightMediaPlayer，設置界面對中：改變「LayoutRoot」的佈局類型爲「ScrollViewer」，放入Canvas（canvas1），設置其背景和大小，設置「UserControl」的Width和Height屬性爲自動。

2、me控件屬性設置

    「佈局」中Width：448   Height：252，至關於16:9。

    「媒體」中Stretch：UniformToFill。me控件放置在Canvas佈局控件canvas1中，這對me的位置和尺寸變化很重要。

3、音量控制設置

    圖2-5右側的音量控制圖標表面看是三角形的，實際上它是1個矩形ProgressBar控件（命名爲volume），但其左上角部分用1個和背景顏色（黑色）一致的Path（用鋼筆工具手繪）覆蓋，看到的是三角形。volume和Path組合在grid3中。

    volume控件屬性設置（「公共屬性」欄目中）：

    Maximum：1             Minimum：0

    volume控件的Value屬性（默認值改設爲0.6，原來是0.5）採用數據綁定設置：在【屬性】面板的「公共屬性」欄中選Value屬性—鼠標左鍵點擊右側的白色方塊（高級選項），在彈出的菜單中選擇「數據綁定」，這時出現「建立數據綁定」窗口，選擇「元素屬性」頁面，左側場景元素中選「me」控件，右側屬性中選Value，點「肯定」鍵完成設置。me控件的音量將跟隨volume控件的Value變化。

    喇叭圖標由圖形組合而成，最後組合在Grid控件（mute）中，構成靜音/播音反覆控制，若是處於靜音喇叭圖標上又多出紅色「×」（組合在grid5中），程序以下。

 

//音量控制

     private void volume_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

         //獲取ProgressBar控件對應的音量值

this.me.Volume=e.GetPosition(this.volume).X/this.volume.ActualWidth;

     }

    //靜音控制

     private void mute_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

         this.me.IsMuted=!this.me.IsMuted;

         if (this.me.IsMuted)

              //若是是靜音，顯示紅色×

              this.grid5.Visibility=Visibility.Visible;

         else

              this.grid5.Visibility=Visibility.Collapsed;

     }

4、進度條設置和預覽窗口

    MediaElement控件自己有邊下載邊播放的功能，這裏使用圖圖2-5中間的進度條控件ProgressBar（名爲progressbar）的進度值顯示視頻下載進度，同時又在其中附加了1個矩形控件（名爲vernier，紅色）做爲遊標用於顯示播放進度，這2個控件組合放置在Canvas中（名爲canvas2）,canvas2的大小和progressbar一致，這樣方便遊標vernier的位置設置。當點擊進度條時視頻就會選擇從點擊處對應的視頻位置開始播放。另外有3個文本框分別顯示下載的緩衝進度（textblock1）、播放器當前狀態（textblock2）和視頻播放時的時間進度（textblock3）。

    關於緩衝進度：當me控件的屬性Source被賦值後，自動產生下載緩衝過程，下載緩衝時間屬性BufferingTime默認值是00:00:05（5秒，在「媒體」屬性欄目中），此值的大小會影響視頻播放的平滑程度，固然和網絡速度也有關，本實例中設置500ms：

    this.me.BufferingTime=TimeSpan.FromMilliseconds(500);

    但實際的緩衝值在0-1之間變化，乘以100後至關於百分比，1個100%應當對應1個下載緩衝時間，1個視頻的下載可能要通過若干個這樣的過程。並且當1個緩衝完成時自動產生BufferProgressChanged事件，緩衝的顯示正是在此事件的程序中設計的。

    緩衝變化會使視頻文件下載進度變化，而此變化也會產生DownloadProgressChanged事件，能夠在其中編寫程序顯示下載進度屬性DownloadProgress的變化值（0-1之間）。

    關於播放器狀態，MedaiElement控件在視頻下載和播放時有以下狀態：

    Buffering、Closed、Opening、Paused、Playing 或 Stopped。默認值爲 Closed，這些狀態根據英文就能理解它的含義，再也不解釋。狀態的顯示也是在此BufferProgressChanged事件程序中設計的。

    圖2-4下方有5個圖形圖標，表明5個視頻，當點擊時就會產生下載播放過程，下面以點擊左邊的圖標「機場」爲例，看如何編寫程序的。

 

//播放"機場"視頻

     private void p_w_picpath1_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

//定時器中止，定時器的做用後面介紹

         timer.Stop();

//下載進度值回0

         this.progressbar.Value=0;

         //獲取當前瀏覽位置定位(含網頁文件名稱),如：http://localhost:2277/Default.html

         uri=System.Windows.Browser.HtmlPage.Document.DocumentUri.ToString();

         //LastIndexOf("/"):搜尋定位中右邊最後1個"/"的位置，其左側是不含網頁文件的定位                //造成服務器視頻文件的位置信息

         videoname=uri.Substring(0,uri.LastIndexOf("/")+1)+"video/video1.wmv";

         //設置視頻播放控件的視頻源

         this.me.Source=new Uri(videoname,UriKind.RelativeOrAbsolute);

//設置預覽視頻源，後面會介紹視頻預覽

         thisthis.preview.Source=this.me.Source;

         this.preview.Stop();

         //設置視頻文件打開後的事件

         this.me.MediaOpened+=new RoutedEventHandler(meOpened);

         //設置下載進度變化事件

         this.me.DownloadProgressChanged+=new RoutedEventHandler(meDownload);

//設置下載緩衝時間

         this.me.BufferingTime=TimeSpan.FromMilliseconds(500);

         //設置下載緩衝變化的事件

     this.me.BufferingProgressChanged+=new RoutedEventHandler(me_BufferingProgressChanged);

     }

//下載進度顯示

     private void meDownload(object sender, System.Windows.RoutedEventArgs e)

     {

         //DownloadProgress是下載進度，變化範圍0-1

         thisthis.progressbar.Value=this.me.DownloadProgress*this.progressbar.Maximum;

     }

     //下載緩衝變化顯示

     double bp=0;

     private void me_BufferingProgressChanged(object sender,RoutedEventArgs e){

         //BufferingProgress：緩衝變化值0-1

         bp=this.me.BufferingProgress*100;

         this.textblock1.Text="下載緩衝進度:"+bp.ToString()+"%";

          this.textblock2.Text="播放器當前狀態:"+me.CurrentState.ToString();

     }

//文件打開後定時器啓動

     private void meOpened(object sender, System.Windows.RoutedEventArgs e)

     {

         timer.Start();

     }

//當點擊進度條時，選擇視頻播放位置

     private void progressbar_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

         this.me.Pause();

         this.me.Position=TimeSpan.FromSeconds(currentlength);

         this.me.Play();

     }

    在本機實際調試時，可能看不到緩衝變化和播放狀態，可是若是放到服務器上調試就會很明顯，本實例已經在網絡服務器上調試驗證。

    以上的程序大多數代碼在前面已經有了解釋，還有視頻預覽preview和定時器timer沒有涉及到。

    Preview也是1個MediaElement控件（和邊框矩形設計一塊兒組合在canvas2的grid4中），當視頻已經下載並播放時，若是鼠標懸停在進度條上馬上顯示視頻對應的時間，若是鼠標中止不動一段時間（好比2秒），會自動彈出視頻預覽窗口，看到的是鼠標懸停處對應的視頻，此預覽只反覆播放懸停處的幾幀視頻圖像。鼠標離開或變化位置自動中止，這點和目前網上看到的有的視頻播放器的效果是同樣的。

這裏用到時間控制，由定時器來完成，程序以下：

private DispatcherTimer timer=new  DispatcherTimer();

//定義變量，用於視頻源地址和文件位置信息變量

     string uri,videoname;

     public MainPage()

     {

         InitializeComponent();

//Esc鍵提示關閉

         this.Esctext.Visibility=Visibility.Collapsed;

//進度條當前位置顯示文本框關閉

         this.cp.Visibility=Visibility.Collapsed;

//預覽窗口關閉

         this.grid4.Visibility=Visibility.Collapsed;

         timer.Interval=TimeSpan.FromMilliseconds(500);

         timer.Tick+=new EventHandler(timerarrive);

//設置視頻播放進度遊標初始位置

         Canvas.SetLeft(this.vernier,0);

         Canvas.SetTop(this.vernier,0);

     }

     //定時器定時訪問程序

//視頻時間總長度和視頻進度條當前值變量

     double melength=0,currentvalue;

//記憶鼠標懸停位置

     double movevalue=0;

//懸停不動時間計數和預覽時間計數

     double times=0,previewtimes=0;

//鼠標移動

     bool move=false;

     private void timerarrive(object sender,EventArgs e){

//獲取視頻時間總長度

         memelength=me.NaturalDuration.TimeSpan.TotalSeconds;

         //視頻進度條當前值=視頻進度條最大值*視頻當前位置時間/視頻時間總長度

         currentvalue=this.progressbar.ActualWidth*me.Position.TotalSeconds/melength;

//設置視頻進度遊標位置

         Canvas.SetLeft(this.vernier,currentvalue);

//獲取視頻當前位置時間小時值、分值、秒值

          int h=me.Position.Hours;

         int m=me.Position.Minutes;

         int s=me.Position.Seconds;

//下面使用了C#的條件運算符<條件>?<知足條件時>:<不知足條件時>

         this.textblock3.Text="播放時間進度："+(h<10? "0"+h.ToString():h.ToString())+":"

                      +(m<10? "0"+m.ToString():m.ToString())+":"

                      +(s<10? "0"+s.ToString():s.ToString());

         //預覽視頻處理

         if (times<4)

//計數控制+1（位置不變的次數）

             times++;

              if (times==1){

                  //取當前鼠標X位置

                  movevalue=progressbarX;

}

//若是鼠標滑動在進度條且X座標沒有變化，且計數達4次

              if (move && movevalue==progressbarX){

                   if (times==4){

//開啓預覽窗口

                       this.grid4.Visibility=Visibility.Visible;

                       //若是預覽窗口當前處於播放狀態

                       if (this.preview.CurrentState==MediaElementState.Playing){

//預覽時間控制計數

                            previewtimes++;

//達到預覽時間

                            if (previewtimes==4)

//暫停預覽

                                 this.preview.Pause();

                       }else{

//設置預覽視頻位置

                        this.preview.Position=current;

//啓動視頻預覽，且設置預覽時間控制計數回0

                       this.preview.Play();

                       previewtimes=0;

}

                   }

         }else{

              //關閉預覽窗口，同時位置不變的次數計數回0

              this.grid4.Visibility=Visibility.Collapsed;

              times=0;

}

         }

    定時訪問程序中用到的一些變量，如progressbarX、move等，和下列程序有關：

//定義變量，用於當前位置時間值和鼠標X座標

     double currentlength,progressbarX;

//進度條鼠標懸停處的時間

     TimeSpan current;

//鼠標懸停在進度條上方，進度條當前位置時間顯示

     private void progressbar_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)

     {

          //事件引起者是ProgressBar控件

         ProgressBar pb=sender as ProgressBar;

//視頻時間總長度

         memelength=me.NaturalDuration.TimeSpan.TotalSeconds;

         //進度條當前位置時間值      currentlength=melength*e.GetPosition(this.progressbar).X/this.progressbar.ActualWidth;

         int h=(int)currentlength/3600;

         int m=(int)((currentlength600)/60);

         int s=(int)((currentlength600)`);

//設置視頻進度遊標位置

         Canvas.SetLeft(this.cp,e.GetPosition(this.progressbar).X-30);

          Canvas.SetLeft(this.grid4,e.GetPosition(this.progressbar).X-54);

          //當前位置顯示使用Callout（cp）控件

         this.cp.Visibility=Visibility.Visible;

         this.cp.Content=(h<10? "0"+h.ToString():h.ToString())+":"

                         +(m<10? "0"+m.ToString():m.ToString())+":"

                        +(s<10? "0"+s.ToString():s.ToString());

         current=TimeSpan.Parse(this.cp.Content.ToString());

         move=true;

         progressbarX=e.GetPosition(this.progressbar).X;

     }

     //鼠標離開進度條

     private void progressbar_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)

     {

          //關閉預覽，關閉進度條當前位置時間顯示

         this.grid4.Visibility=Visibility.Collapsed;

         this.cp.Visibility=Visibility.Collapsed;

//中止鼠標移動

         move=false;

//鼠標懸停不動時間計數置0，鼠標懸停位置回0

         times=0;

         movevalue=0;

//預覽播放中止，預覽計數回0

         this.preview.Stop();

         previewtimes=0;

}

五、播放控制

    對視頻的「暫停」、「播放」、「中止」、「重播」等控制圖標採用了故事板動畫，當鼠標懸停在這些圖標上時顏色發生變化（本例變爲綠色），程序比較簡單：

//暫停按鈕控制

     private void pause_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard1.Begin();

     }

     private void pause_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard1.Stop();

     }

     private void pause_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

         this.me.Pause();

     }

     //播放按鈕控制

     private void play_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard2.Begin();

     }

     private void play_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard2.Stop();

     }

     private void play_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

         this.me.Play();

     }

     //中止按鈕控制

     private void stop_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard3.Begin();

     }

     private void stop_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard3.Stop();

     }

     private void stop_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

         this.me.Stop();

     }

     //重播按鈕控制

     private void replay_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard4.Begin();

     }

     private void replay_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard4.Stop();

     }

     private void replay_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

         this.me.Stop();

         this.me.Play();

}

六、全屏播放控制

    Silverlight自己有全屏播放的控制語句：

Application.Current.Host.Content.IsFullScreen=!Application.Current.Host.Content.IsFullScreen;

可是，此語句控制的是當前顯示界面的全屏顯示，而咱們只但願視頻部分全屏播放，本實例中編程先將視頻放到瀏覽器的「全屏」（瀏覽器菜單和工具條保留）大小（程序設計指定按Esc鍵恢復原始大小），而後再使用上述語句放大到全屏，此語句默認並提示按Esc取消全屏，這樣當程序運行時第一次按Esc鍵實際恢復到瀏覽器「全屏」，第二次再按Esc鍵恢復到原始大小，程序以下。

//全屏控制

     private void fullscreen_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard5.Begin();

     }

     private void fullscreen_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)

     {

         this.Storyboard5.Stop();

     }

     //定義變量，記憶初始值

     double canvas1W,canvas1H,meW,meH,meLeft,meTop;

     private void fullscreen_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

     {

         //視頻播放時才能使用全屏操做

         if (this.me.CurrentState==MediaElementState.Playing){

//記憶Canvas（me控件的容器）的原始大小

         canvas1W=this.canvas1.ActualWidth;

         canvas1H=this.canvas1.ActualHeight;

         //記憶me控件的原始大小，以及me控件的原始位置

meW=this.me.ActualWidth;

         meH=this.me.ActualHeight;

         meLeft=Canvas.GetLeft(me);

         meTop=Canvas.GetTop(me);

          //佈局控件放大到當前應用程序（在瀏覽器中）界面大小

         this.canvas1.Width=Application.Current.Host.Content.ActualWidth;

         this.canvas1.Height=Application.Current.Host.Content.ActualHeight;

//設置me控件層次到上層（20是界面元素個數最大值，實際沒有這麼多）

          Canvas.SetZIndex(me,20);

         //視頻控件也放大到當前應用程序界面大小

         thisthis.me.Width=this.canvas1.Width;

         thisthis.me.Height=this.canvas1.Height;

//視頻控件位置設置

         Canvas.SetLeft(me,0);

         Canvas.SetTop(me,0);

//使用按Esc鍵提示，以及按Esc鍵提示框位置，並將提示框放置最上層

         this.Esctext.Visibility=Visibility.Visible;

         Canvas.SetLeft(Esctext,0);

         Canvas.SetTop(Esctext,0);

         Canvas.SetZIndex(Esctext,21);

         //設置按Esc鍵事件（自定義）

         Application.Current.RootVisual.KeyDown += new KeyEventHandler(ESC_Down);

         //使用Silverlight的全屏控制Application.Current.Host.Content.IsFullScreen=!Application.Current.Host.Content.IsFullScreen;

          }

     }

     private void ESC_Down(object sender, KeyEventArgs e)

     {

           //若是按下Esc鍵

         if (e.Key.ToString()=="Escape"){

//Esc鍵提示框關閉，恢復佈局原始大小

              this.Esctext.Visibility=Visibility.Collapsed;

             this.canvas1.Width=canvas1W;

             this.canvas1.Height=canvas1H;

//恢復me控件原始大小，置於底層，並恢復原始位置

              this.me.Width=meW;

              this.me.Height=meH;

              Canvas.SetZIndex(me,0);

             Canvas.SetLeft(me,meLeft);

              Canvas.SetTop(me,meTop);

         }