一個簡單的Silverlight視訊播放器

下面就來制作一個簡易的視訊播放器：

1、在XMAL頁面中添加一個MediaElement，用以容納視訊檔案。

2、拖放一個Slider，用來實時顯示視訊播放進度。

3、一個TextBlock，用來顯示目前播放的時間值。

4、一個TextBlock，用來顯示視訊的總時間。

5、五個按鈕，分别用來進行播放、暫停、繼續、停止、全屏操作。

6、一個CheckBox，用來控制靜音操作。

7、一個Slider，用來控制媒體音量。

以下是檔案代碼：

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="VideoPaly.MainPage"

Width="640" Height="480">

<Grid x:Name="LayoutRoot" Background="Gray">

<Canvas Margin="34,23,38,63">

<MediaElement x:Name="media" Source="http://download.microsoft.com/download/2/0/5/205d8c39-3d55-4032-8195-7b0e6eda4cb6/WinVideo-SL-InstallExperience.wmv" Height="248" Width="542" Canvas.Left="10" Canvas.Top="8" BufferingProgressChanged="media_BufferingProgressChanged" Loaded="media_Loaded"/>

<Slider x:Name="slider1" Height="21" Width="550" Canvas.Left="10" Canvas.Top="260" ValueChanged="Slider_ValueChanged" Maximum="10" SmallChange="1"/>

<Button x:Name="btnPlay" Height="25" Width="57" Canvas.Left="151" Canvas.Top="324" Content="Play" Click="btnPlay_Click"/>

<Button x:Name="btnPause" Height="25" Width="57" Canvas.Left="212" Canvas.Top="324" Content="Pause" Click="btnPause_Click"/>

<Button x:Name="btnResume" Height="25" Width="57" Canvas.Left="273" Canvas.Top="324" Content="Resume" Click="btnResume_Click"/>

<Button x:Name="btnStop" Height="25" Width="57" Canvas.Left="334" Canvas.Top="324" Content="Stop" Click="btnStop_Click"/>

<TextBlock x:Name="tbCurrentTime" Height="25" Width="90" Canvas.Left="22" Canvas.Top="281" TextWrapping="Wrap"/>

<TextBlock x:Name="tbTotalTime" Height="25" Width="91" Canvas.Left="505" Canvas.Top="281" TextWrapping="Wrap"/>

<CheckBox x:Name="cbSilent" Canvas.Left="526" Canvas.Top="369" Content="靜音" RenderTransformOrigin="0.881,0.235" Checked="cbSilent_Checked" Unchecked="cbSilent_Unchecked"/>

<TextBlock x:Name="tbBufferingdValue" Height="55" Width="171" Canvas.Left="213" Canvas.Top="111" TextWrapping="Wrap" FontSize="18.667"/>

<Slider x:Name="sliderVolumn" Height="74" Width="36" Canvas.Left="486" Canvas.Top="312" Orientation="Vertical" ValueChanged="sliderVolumn_ValueChanged" Maximum="1" LargeChange="0.2"/>

<Button x:Name="btnFullScreen" Height="25" Width="57" Canvas.Left="395" Canvas.Top="324" Content="FullScreen" Click="btnFullScreen_Click"/>

</Canvas>

</Grid>

</UserControl>

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Threading;

namespace VideoPaly

{

public partial class MainPage : UserControl

//使用計時器對象來更新播放進度

private DispatcherTimer timer = new DispatcherTimer();

// 媒體的時長

private TimeSpan duration;

public MainPage()

// 為初始化變量所必需

InitializeComponent();

}

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

// 播放

media.Play();

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

// 暫停

media.Pause();

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

// 繼續

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

//停止

media.Stop();

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

// 靜音

media.IsMuted = true;

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

// 不靜音

media.IsMuted = false;

private void Slider_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)

//确定多媒體對象的播放位置是否處于可管理狀态

if (media.CanSeek)

//重新設定MediaElement的播放位置

media.Position = TimeSpan.FromSeconds((media.NaturalDuration.TimeSpan.TotalSeconds*slider1.Value)/10);

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

// 視訊緩沖事件

double bufferingValue = this.media.BufferingProgress * 100;

this.tbBufferingdValue.Text = "緩沖 : " + bufferingValue.ToString() + "%";

if(this.tbBufferingdValue.Text=="緩沖 : 100%")

//隐藏緩沖值

this.tbBufferingdValue.Visibility = Visibility.Collapsed;

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

//設定事件引發的時間間隔

timer.Interval = TimeSpan.FromMilliseconds(500);

//計時器對象事件

timer.Tick += new EventHandler(timer_Tick);

//開始計時

timer.Start();

//設定音量

media.Volume = 0.8;

sliderVolumn.Value = 0.8;

private void timer_Tick(object sender, System.EventArgs e)

//目前處于播放時有效

if (this.media.CurrentState == MediaElementState.Playing)

duration = media.NaturalDuration.HasTimeSpan ? media.NaturalDuration.TimeSpan : TimeSpan.FromMilliseconds(0);

this.tbCurrentTime.Text = string.Format("{0}:{1}:{2}", media.Position.Hours < 10 ? "0" + media.Position.Hours.ToString() : media.Position.Hours.ToString(), media.Position.Minutes < 10 ? "0" + media.Position.Minutes.ToString() : media.Position.Minutes.ToString(), media.Position.Seconds < 10 ? "0" + media.Position.Seconds.ToString() : media.Position.Seconds.ToString());

this.tbTotalTime.Text = string.Format(

"{0}{1:00}:{2:00}:{3:00}", "時長：",

duration.Hours,

duration.Minutes,

duration.Seconds);

//跳過事件處理程式

slider1.ValueChanged -= new RoutedPropertyChangedEventHandler<double>(Slider_ValueChanged);

//計算并設定Slider的百分比

slider1.Value = (media.Position.TotalSeconds / media.NaturalDuration.TimeSpan.TotalSeconds) * 10;

//重新聲明ValueChanged事件

slider1.ValueChanged += new RoutedPropertyChangedEventHandler<double>(Slider_ValueChanged);

private void sliderVolumn_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)

// 音量發生改變觸發事件

media.Volume = sliderVolumn.Value;

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

// 全屏操作

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

以上代碼，拷貝粘貼，可以直接運作，但是因為視訊檔案時從Microsoft上下載下傳的,是以離線是看不到視訊的。

運作效果圖如下：