Lekce 19 - Audio/Video přehrávač v C# a WPF - Základ

V minulé lekci, Zdroje (Resources) v C# .NET WPF, jsme se věnovali resources (zdrojům).

V dnešním C# .NET WPF tutoriálu začneme pracovat na přehrávači videa a hudby. Použijeme prvek MediaElement a přidáme si ovládací tlačítka.

Hotový projekt bude plnohodnotný přehrávač, na kterém si procvičíme mimo jiné i stylování ovládacích prvků:

V přehrávači budeme mít i modul pro prohlížení obrázků:

Aplikace bude podporovat i playlisty a další vychytávky:

Pojďme na to 😀

Funkce přehrávače

Nejdříve si ujasníme, jaké funkcionality od přehrávače chceme. A abychom se v tom hned "neutopili", budeme postupovat od jednoduchého ke složitějšímu.

Základní video přehrávač bude mít tyto funkcionality:

• Vybrat a otevřít soubor.
• Spustit přehrávání.
• Pozastavit přehrávání.
• Ukončit přehrávání.

To by pro začátek mohlo stačit. Později si přidáme další, například ovládání hlasitosti, posun videa a podobně.

Aplikace AVPrehravac

Ve Visual Studiu si založíme nový WPF projekt s názvem AVPrehravac.

XAML kód

Po založení projektu se přesuneme do XAML kódu MainWindow.xaml.

Prvek <MediaElement>

Do MainWindow.xaml si vložíme prvek <MediaElement>, který slouží k přehrávání audio a video souborů. Dále specifikujeme velikost okna:

<Window x:Class="AVPrehravac.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AVPrehravac"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <MediaElement/>
    </Grid>
</Window>

A máme v podstatě hotovo Jenže, když spustíme aplikaci, tak nic nevidíme. Prvek <MediaElement> neví, co chceme přehrát. Pojďme to napravit.

Tlačítka Otevřít a Konec

V XAML kódu MainWindow.xaml si nejprve pojmenujeme formulář na x:Name="wdwPrehravac" a prvek <MediaElement> na x:Name="avPrehravac". V tuto chvíli by se nám sice soubor přehrál, ale záhy bychom zjistili, že přehrávač přehrává pořád to samé. Potřebujeme nějaké ovládací prvky.

MainWindow.xaml upravíme následovně:

<Window x:Name="wdwPrehravac" x:Class="AVPrehravac.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AVPrehravac"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Grid Margin="0,20,0,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="30"/>
            <RowDefinition Height="10"/>
        </Grid.RowDefinitions>

        <MediaElement x:Name="avPrehravac" />

        <Grid Grid.Row="2" Margin="20,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="80"/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0" Content="Otevřít"
                    Click="BtnOtevri" ToolTip="Výběr videa"/>

            <Button Grid.Column="5" Content="Konec"
                    Click="ZavriOkno"
                    ToolTip="Ukončení aplikace"/>
        </Grid>
    </Grid>
</Window>

Do kontejneru <Grid> jsme si přidali tlačítka:

• Otevřít - Tlačítkem budeme vybírat video soubor, který chceme přehrát. Do vlastnosti Content jsme vložili text Otevřít a do Click název obslužné metody BtnOtevri.
• Konec - Tlačítkem budeme ukončovat aplikaci. Do vlastnosti Content jsme vložili Konec a do názvu volané obslužné metody pak ZavriOkno.

Kontejner jsme si vertikálně rozdělili na čtyři části. V první části máme prvek <MediaElement>. Do třetí části jsme umístili tlačítka. Tuto část jsme navíc rozdělili na tři sloupce.

Code Behind

Přesuneme se do souboru MainWindow.xaml.cs, kam přidáme obslužné metody tlačítek.

Metoda BtnOtevri()

Jako první si přidáme obslužnou metodu BtnOtevri():

 ...
private void BtnOtevri(object sender, RoutedEventArgs e)
{
    OpenFileDialog openFileDialog = new();
    openFileDialog.Filter = "Video soubory " +
           "(*.mpg;*.mpeg;*.avi;*.mp4)|*.mpg;*.mpeg;*.avi;*.mp4";
    if (openFileDialog.ShowDialog() == true)
    {
        avPrehravac.Source = new Uri(openFileDialog.FileName);
    }
}

V metodě otevřeme dialogové okno pro výběr souboru. Výběr souboru omezujeme na video soubory. Po výběru souboru jej přiřazujeme prvku <MediaElement> pomocí jeho vlastnosti Source. Jakmile se provede přiřazení, začne <MediaElement> daný soubor přehrávat.

Metoda BtnZavriOkno()

Metoda bude obsluhovat zavírací tlačítko Zavřít. Ukončení aplikace provedeme zavřením hlavního okna:

 . . .
private void ZavriOkno(object sender, RoutedEventArgs e)
{
    wdwPrehravac.Close();
}

Hlavní okno jsme si pojmenovali wdwPrehravac.

Ovládací tlačítka

Na začátku jsme si stanovili, že chceme mít možnost video i pozastavit a kdykoliv spustit znovu. Přidáme si proto do aplikace tlačítka pro:

• Spuštění videa s hodnotou Hraj ve vlastnosti Content a obslužnou metodou BtnPrehraj().
• Pozastavení videa, s hodnotou Pauza ve vlastnosti Content a obslužnou metodou BtnPauza().
• Ukončení přehrávání s hodnotou Zavřít ve vlastnosti Content a obslužnou metodou BtnZavri().

XAML kód

Upravený XAML kód vypadá takto:

 ...
<MediaElement x:Name="avPrehravac" LoadedBehavior="Manual"/>

<Grid Grid.Row="2" Margin="20,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="80"/>
    </Grid.ColumnDefinitions>

    <Button x:Name="btnOtevri" Grid.Column="0" Content="Otevřít"
            Click="BtnOtevri" ToolTip="Výběr videa"/>

    <Button x:Name="btnHraj" Grid.Column="1" Content="Hraj"
            Click="BtnPrehraj"
            ToolTip="Přehrát video"/>

    <Button x:Name="btnPauza" Grid.Column="2" Content="Pauza"
            Click="BtnPauza"
            ToolTip="Pozastavit video"/>

    <Button x:Name="btnZavri" Grid.Column="3" Content="Zavřít"
            Click="BtnZavri"
            ToolTip="Zavřít video"/>

    <Button Grid.Column="5" Content="Konec"
            Click="ZavriOkno"
            ToolTip="Ukončení aplikace"/>
 </Grid>

Tlačítka opět umístíme do kontejneru Grid, který rozšíříme z tří na šest sloupců. Zároveň ještě upravíme i prvek <MediaElement>. Změníme předdefinovanou vlastnost LoadedBehavior z hodnoty Play na Manual. To proto, abychom mohli přehrávač ovládat ručně.

Code Behind

Soubor s obslužným kódem rozšíříme o příslušné metody.

Obslužné metody

Kód obslužných metod BtnPrehraj(), BtnPauza(), BtnZavri() vypadá takto:

 . . .

private void BtnPrehraj(object sender, RoutedEventArgs e)
{
    avPrehravac.Play();
}

private void BtnPauza(object sender, RoutedEventArgs e)
{
    avPrehravac.Pause();
}

private void BtnZavri(object sender, RoutedEventArgs e)
{
    avPrehravac.Close();
}

Testování

Aplikaci spustíme. Tlačítkem Otevřít si otevřeme nějaké naše video, na kterém si vyzkoušíme funkčnost ostatních tlačítek:

V příští lekci, Audio/Video přehrávač v C# a WPF - Úprava kódu, si vylepšíme kód AVPřehrávače. Upravíme přístupy na tlačítka a obslužné metody v Code Behind rozdělíme do regionů.

 

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.