Silverlight

На этом уроке мы продолжим рассказ о работе с видео. Сегодня мы попробуем создать простейший МедиаПлеер, который позволит нам проиграть видео (аудио файл). В нашем примере мы будем использовать видео файлы. Сразу скажу, что урок требует минимального знания C#, большинство моментов я объясню, за разъяснением синтаксиса языка, обращайтесь к соответствующим источникам и справочным средствам.

Начало

Для урока я использую следующие объекты: MediaElement, Slider (3 штуки), Checkbox, TextBlock (2 штуки), TextBox, Button (3 штуки).

Из этих объектов мы создадим элементарный плеер, сразу уточню, что я не старался сделать красивый и навороченный плеер, я хотел показать просто, как это работает. Если вы все-таки захотите наворотить и приукрасить ваш плеер, пожалуйста, оставляю это на ваше самообразование и фантазию.

Код XAML:

<Canvas  Width="640" Height="480">
	<MediaElement x:Name="Video" 
			Stretch="Fill" 
			Source="tech_support.wmv" 
			Canvas.Top="30" Canvas.Left="45" 
			Width="330" Height="180" 
			CurrentStateChanged="Video_CurrentStateChanged"
			/>
	<Button x:Name="Play" 
		Click="Play_Click"
		HorizontalAlignment="Center"  VerticalAlignment="Center" 
		Width="85" Height="30" 
		Content="Play" 
		Canvas.Top="225" Canvas.Left="45"/>
	<Button x:Name="Pause"
		Click="Pause_Click"
		HorizontalAlignment="Center"  VerticalAlignment="Center"  
		Height="30" Width="85"
		Content="Pause" 
		Canvas.Top="225" Canvas.Left="290" />
	<Button x:Name="Stop" 
		Click="Stop_Click"
		HorizontalAlignment="Center"  VerticalAlignment="Center" 
		Width="85" Height="30" 
		Content="Stop" 
		Canvas.Top="225" Canvas.Left="171"/>
</Canvas>

Начнем с самого простого добавим на нашу страницу MediaElement (назовем его Video) и укажим в виде источника наш файл, который заранее необходимо добавить в ваш проект. В нашем случае файл называется (tech_support.wmv).

Также создадим три кнопки Play, Pause, Stop. Для каждой кнопки создадим события Click: Play_Click, Pause_Click, Stop_Click.

Создадим для методы для обработки событий:

Код C#:

private void Play_Click(object sender, RoutedEventArgs e)
{
	//Проверяем в каком состоянии находится видео
	//Если Пауза то просто запускаем
	//Если уже проигрывается, то стартуем заново 
	if (Video.CurrentState == MediaElementState.Paused)
	{
		Video.Play();
	}
	else
	{
		Video.Position = new TimeSpan(0);
		Video.Play();
	}
}


private void Pause_Click(object sender, RoutedEventArgs e)
{
	//Просто делаем паузу как на обычных плеерах
	//то есть если пауза, то начинаем играть
	//если проигрывается видео, то ставим паузу
	if (MediaElementState.Paused == Video.CurrentState)
	{
		Video.Play();
	}
	else
	{
		Video.Pause();
	}
}

private void Stop_Click(object sender, RoutedEventArgs e)
{
	//Просто останавливаем проигрывание видео
	this.Video.Stop();
}

запускаем наше приложение и проверяем, убедились, что все кнопки отрабатывают как надо. Уже здесь видно, что всего лишь несколькими строчками кода, мы создали простой медиа плеер.

Работа со звуком

Теперь рассмотрим возможности работы со звуком. Добавим следующие элементы на нашу страницу:

Код XAML:

<CheckBox  x:Name="Mute" 
		HorizontalAlignment="Center"  VerticalAlignment="Center"  
		Width="112" Height="25" 
		Content="ON" 
		Click="Mute_Click" 
		Canvas.Top="275" Canvas.Left="45" TextAlignment="Right"/>
<TextBlock Text="Volume" 
		Canvas.Top="260" Canvas.Left="140"
		FontSize="12" />
<Slider  x:Name="VolumeSlider" 
		HorizontalAlignment="Center"  VerticalAlignment="Center" 
		Height="20" Width="155"
		Canvas.Top="275" Canvas.Left="90" 
		MouseLeftButtonUp="VolumeSlider_MouseLeftButtonUp"
		/>
<TextBlock Text="Balance" 
		Canvas.Top="260" Canvas.Left="295" 
		FontSize="12" />
<Slider x:Name="BalanceSlider" 
		HorizontalAlignment="Center"  VerticalAlignment="Center" 
		Height="20" Width="116"
		Canvas.Top="275" Canvas.Left="259" 
		MouseLeftButtonUp="BalanceSlider_MouseLeftButtonUp"
		/>

Mute (CheckBox) – Отвечает за включение/отключение звука. Для него необходимо добавить событие Click: Mute_Click. И его обработчик, где стоит простая проверка отмечен ли CheckBox или нет, а также меняем свойство Content на on/ off, чтобы было более наглядно:

Код C#:

private void Mute_Click(object sender, RoutedEventArgs e)
{
	if (!(bool)Mute.IsChecked)
	{
		Video.IsMuted = false;
		Mute.Content = "ON";
		
	}
	else
	{
		Video.IsMuted = true;
		Mute.Content = "OFF";
	}
}

VolumeSlider (Slider) – отвечает за уровень громкости. Минимальное значение для слайдера 0, а максимальное 1. По умолчанию при загрузке видео, значение устанавливается в 0,5. Все эти значения можно установить непосредственно в XAML, но так как я экспериментировал, эти значения я присвоил в событие Page_Load.

Код С#:

//Добавляем следующие строчки в событие Page_Load
VolumeSlider.Value = 0.5;
VolumeSlider.Minimum = 0;
VolumeSlider.Maximum = 1;
VolumeSlider.SmallChange = 0.1;
VolumeSlider.LargeChange = 0.2;

Для нашего VolumeSlider, пропишем событие MouseLeftButtonUp – в котором будем присваиваться свойству Volume MediaElement-a, значение VolumeSlider.

Код С#:

private void VolumeSlider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
	Video.Volume = VolumeSlider.Value;
}

BalanceSlider(Slider) – отвечает за баланс между потоками правого и левого выходного устройства. По умолчанию равно 0, минимальное значение (левое) – -1. максимальное (правое) – 1. Все эти значения можно установить непосредственно в XAML, но так как я экспериментировал, эти значения я присвоил в событие Page_Load.

Код С#:

//Добавляем следующие строчки в событие Page_Load
BalanceSlider.Value = 0;
BalanceSlider.SmallChange = 0.1;
BalanceSlider.LargeChange = 0.1;
BalanceSlider.Minimum = -1;
BalanceSlider.Maximum = 1;

Добавим обработчик события MouseLeftButtonUp – в котором будем присваивать свойству Balance MediaElement-a, значение BalanceSlider.

Код С#:

private void BalanceSlider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
	Video.Balance = BalanceSlider.Value;
}

Запускаем приложение и проверям. Попробуйте попередвигать слайдеры, и убедитесь, что все работает правильно ,если что-то работает не правильно перепроверьте еще раз ваш код.

Делаем прокрутку и таймер

Теперь сделаем для нашего видео плеера полосу прокрутки и таймер. Это самый сложный момент нашей задачи.
Для этого нам понадобится Silder и TextBox:

Код XAML:

<Slider  x:Name="TimerSlider" 
		HorizontalAlignment="Center"  VerticalAlignment="Center" 
		Height="20" Width="263"
		Canvas.Top="315" Canvas.Left="45" 
		MouseLeftButtonUp="TimerSlider_MouseLeftButtonUp" 
		MouseLeftButtonDown="TimerSlider_MouseLeftButtonDown"
/>
<TextBox x:Name="Clock" 
		Height="27" Width="53" 
		Canvas.Left="322" Canvas.Top="308" 
		Text="00:00" 
		HorizontalAlignment="Center"  VerticalAlignment="Center" TextAlignment="Center"  />

TimerSlider (Slider) – будет указывать длительность проигрывания видео. Максимальное значение равно – 1, минимальное – 0. Все эти значения можно установить непосредственно в XAML, но так как я экспериментировал, эти значения я присвоил в событие Page_Load.

Код С#:

//Добавляем следующие строчки в событие Page_Load
TimerSlider.Value = 0;
TimerSlider.Minimum = 0;
TimerSlider.Maximum = 1;
TimerSlider.LargeChange = 0.05;
TimerSlider.SmallChange = 0.01;

Также зададим событие MouseLeftButtonUp и MouseLeftButtonDown, в которых будем устанавливать текущее значение нашему Video.

Код С#:

private void TimerSlider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
	Video.Position = new TimeSpan.FromSeconds(Convert.ToInt64(TimerSlider.Value * Video.NaturalDuration.TimeSpan.TotalSeconds));
	Clock.Text = string.Format("{0:00}:{1:00}", Video.Position.Minutes, Video.Position.Seconds);
	Video.Play();
}

private void TimerSlider_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
	Video.Pause();
}

Как видите, теперь мы можем перемещать видео в любой момент. И при этом наш таймер указывает на позицию куда мы его переместили. Но это конечно же не совсем то, что нам хотелось бы видеть. В обычных видео плеерах, значение слайдера, изменяется вместе с проигрыванием видео.
Для решения этой задачи нам необходимо создать таймер, который мы будем запускать в начале и каждый раз проверять позицию видео, и присываивать ее нашему TextBox –у и Slider – у.

Нам необходимо подключить NameSpace

Код С#:

using System.Windows.Threading;

Затем создать поле у нашего класса:

Код С#:

public DispatcherTimer VideoTimer;

прописываем в Page_Load:

Код С#:

VideoTimer = new DispatcherTimer();
VideoTimer.Interval = TimeSpan.FromMilliseconds(50);
VideoTimer.Tick += new EventHandler(VideoTimer_Tick);

И создаем два события:

Код С#:

void VideoTimer_Tick(object sender, EventArgs e)
{
	if (Video.NaturalDuration.TimeSpan.TotalSeconds > 0)
	{
		Clock.Text = string.Format("{0:00}:{1:00}", Video.Position.Minutes, Video.Position.Seconds);
		TimerSlider.Value = Video.Position.TotalSeconds / Video.NaturalDuration.TimeSpan.TotalSeconds;
	}
}

void Video_CurrentStateChanged(object sender, RoutedEventArgs e)
{
	if (Video.CurrentState == MediaElementState.Playing)
	{
		VideoTimer.Start();
	}
	else
	{
		VideoTimer.Stop();
	}
}

Заключение

Наш простой видеоплеер готов, возможно я его сделал не самым оптимальным образом и самым функциональным. Надеюсь на ваши дополнения и замечания. И ваши примеры. Теперь осталось только попробывать создать свои видео плеер. И например, прикрутить плей лист. Это не такая уж и сложная задача, которую возможно мы рассмотрим в будущих уроках.

Popularity: 51%

Похожие статьи по SilverLight:

1. Работа с видео (Часть 2)
2. SilverLight и JavaScript
3. Работа с видео (Часть 1)
4. Еще о видео-плеерах
5. Темплейты