Přehrávání videa

V minulém díle jsme použili třídu MediaPlayer k přehrání MP3 souboru, ale je také možné ho použít na práci s videi. Protože video někde musí být zobrazeno, potřebujeme i prvek reprezentující ho vizuálně, konkrétně MediaElement.

MediaElement

MediaElement funguje jako obal MediaPlayeru, takže je možné zobrazovat video na konkrétním místě aplikace. Může tedy přehrávat zvukové i video soubory.

Zde je jednoduchý příklad, jak snadno můžete ve své WPF aplikaci video přehrát:

<Window x:Class="WpfTutorialSamples.Audio_and_Video.MediaPlayerVideoSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MediaPlayerVideoSample" Height="300" Width="300">
    <Grid>
        <MediaElement Source="http://hubblesource.stsci.edu/sources/video/clips/details/images/hst_1.mpg" />
    </Grid>
</Window>

A je to! Jeden řádek XAMLu a ve své aplikaci přehráváte video (toto je o Hubbleově teleskopu, více info zde).

Práce s rozměry videa

Příklady v tomto článku zatím používaly pro video stejné rozměry a nedbaly na jeho velikost. To je možné, protože MediaElement obsah roztahuje/zmenšuje, aby odpovídal aktuálním rozměrům. Toto chování je možné ovlivnit pomocí vlastnosti Stretch, která je defaultně nastavená na Uniform, což znamená, že je velikost přizpůsobena při zachování poměru stran.

Pokud je okno větší než video, mělo by vše fungovat správně, ale co když nechcete, aby se obraz zvětšoval? Nechcete radši přizpůsobit okno videu?

První krok je vypnout protahování nastavením Stretch na None, video se díky tomu zobrazí v normální velikosti. Přizpůsobení okna už je jednoduché – použijte SizeToContent. Tady je celý příklad:

<Window x:Class="WpfTutorialSamples.Audio_and_Video.MediaPlayerVideoSizeSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MediaPlayerVideoSizeSample" Height="500" Width="500" SizeToContent="WidthAndHeight">
    <Grid>
        <MediaElement Source="http://hubblesource.stsci.edu/sources/video/clips/details/images/hst_1.mpg" Name="mePlayer" Stretch="None" />
    </Grid>
</Window>

Jak vidíte, i přes pevně dané rozměry 500×500 se okno zmenšilo, aby odpovídalo velikosti videa.

Máme tady ale další problém: než se video načte, jsou z okna vidět pouze okraje. Tomu zabráníme nastavením vlastností MinWidth a MinHeight na vhodné hodnoty (pozor, aby nebyly zase moc velké).

Ovládání MediaElementu/MediaPlayeru

Jak jste mohli vidět po spuštění předchozích příkladů, video se začalo přehrávat hned po načtení, což můžete ovlivnit pomocí vlastnosti LoadedBehavior. To teď uděláme a rovnou přidáme pár ovládacích tlačítek:

<Window x:Class="WpfTutorialSamples.Audio_and_Video.MediaPlayerVideoControlSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MediaPlayerVideoControlSample" Height="300" Width="300">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <MediaElement Source="http://hubblesource.stsci.edu/sources/video/clips/details/images/hst_1.mpg" LoadedBehavior="Manual" Name="mePlayer" />
        <StackPanel Grid.Row="1">
            <Label Name="lblStatus" Content="Not playing..." HorizontalContentAlignment="Center" Margin="5" />
            <WrapPanel HorizontalAlignment="Center">
                <Button Name="btnPlay" Click="btnPlay_Click">Play</Button>
                <Button Name="btnPause" Margin="5,0" Click="btnPause_Click">Pause</Button>
                <Button Name="btnStop" Click="btnStop_Click">Stop</Button>
            </WrapPanel>
        </StackPanel>
    </Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Threading;

namespace WpfTutorialSamples.Audio_and_Video
{
	public partial class MediaPlayerVideoControlSample : Window
	{
		public MediaPlayerVideoControlSample()
		{
			InitializeComponent();

			DispatcherTimer timer = new DispatcherTimer();
			timer.Interval = TimeSpan.FromSeconds(1);
			timer.Tick += timer_Tick;
			timer.Start();
		}

		void timer_Tick(object sender, EventArgs e)
		{
			if(mePlayer.Source != null)
			{
				if(mePlayer.NaturalDuration.HasTimeSpan)
					lblStatus.Content = String.Format("{0} / {1}", mePlayer.Position.ToString(@"mm\:ss"), mePlayer.NaturalDuration.TimeSpan.ToString(@"mm\:ss"));
			}
			else
				lblStatus.Content = "No file selected...";
		}

		private void btnPlay_Click(object sender, RoutedEventArgs e)
		{
			mePlayer.Play();
		}

		private void btnPause_Click(object sender, RoutedEventArgs e)
		{
			mePlayer.Pause();
		}

		private void btnStop_Click(object sender, RoutedEventArgs e)
		{
			mePlayer.Stop();
		}
	}
}

Tento příklad je podobný tomu z minulé lekce, ale místo zvuku přehráváme video. Máme část s tlačítky na ovládání přehrávání, popisek na zobrazení stavu a MediaElement na video samotné.

Při načítání programu vytvoříme ještě timer s intervalem 1s. Ten použijeme na aktualizaci stavového řádku zobrazujícího momentální a celkový čas videa, jak je vidět na obrázku.

Tlačítka prostě volají příslušnou metodu na MediaElementu – Play(), Pause() a Stop().

Shrnutí

Je jasné, jak snadno ve WPF dělat složité věci jako přehrávání videa. Zatím jsme pracovali jen s jednoduchými příklady, ale v dalším díle dáme vše, co jsme se naučili o přehrávání zvuku a videa, dohromady v jednoduchém přehrávači s více funkcemi, než zatím známe. Určitě si to přečtěte!