Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Zdroje (Resources) v C# .NET WPF, jsme se věnovali resources. Jedním ze zajímavých ovládacích prvků WPF je <MediaElement>, který slouží k přehrávání audio a video souborů. V dnešním C# .NET WPF si postupně popíšeme tvorbu jednoduchého přehrávače.

Funkce

Nejdříve bychom si měli ujasnit, jaké funkcionality od přehrávače budeme chtít. A abychom se v tom hned "neutopili", budeme postupovat od jednoduchého ke složitějšímu. Hotový projekt bude opravdu plnohodnotný přehrávač videa i hudby, kde si procvičíme mimo jiné i stylování ovládacích prvků:

Přehrávač videa v C# .NET WPF

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

Práce s hudebními playlisty v C# .NET WPF

Řekněme, že bychom prozatím chtěli 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 můžeme přidat další, např. ovládání hlasitosti, posun videa apod. A abychom se nezdržovali nějakým povídáním, pustíme se hned do tvorby a založíme si ve Visual Studiu nový WPF projekt pod názvem AVPrehravac.

Rozložení prvků

Zobrazí se nám okno MainWindow.xaml s návrhem formuláře, do kterého vložíme <MediaElement /> a 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>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

A máme v podstatě hotovo :) Jenže, když spustíme aplikaci, tak vidíme, že nevidíme nic. Zapomněli jsme totiž ještě říci <MediaElement>u, co chceme přehrát. To se zajistí vlastností Source, kde zadáme cestu k souboru.

V tuto chvíli by se sice soubor přehrál, ale záhy bychom zjistili, že je přehrávač jak "kafemlejnek" a že přehrává pořád to samé. Přidáme si tedy do formuláře rovnou i tlačítko, kterým si budeme vybírat požadovaný soubor a zároveň tlačítko pro ukončení aplikace. A aby se nám tam ovládací prvky neválely jak seno, použijeme kontejner <Grid>, pomocí kterého si je rozmístíme:

<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="470" Width="700">

    <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>

Kromě zmíněných dvou tlačítek jsme přidali také k definici okna jeho jméno, abychom jej mohli pomocí tlačítka zavřít. Rovněž jsme pojmenovali <MediaElement>, aby jej bylo možné naplnit vybraným souborem. Všimněte si, že tlačítka mají připravené i obslužné metody, pojďme je přidat.

Code Behind

Přesuneme se do souboru MainWindow.xaml.cs, kam přidáme metodu pro tlačítko otevírající multimediální soubor:

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

Nezapomeňte si přidat příslušný using.

Metoda otevře dialogové okno pro výběr souboru a po výběru jej přiřadí k <MediaElement>u pomocí jeho vlastnosti Source. Zde jsme výběr pro začátek pomocí filtru omezili pouze na video soubory. Jakmile se provede přiřazení, začne <MediaElement> daný soubor přehrávat.

Druhá metoda bude obsluhovat zavírací tlačítko:

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

Ukončení aplikace se provádí tím, že jí řekneme, které okno (viz pojmenování okna) má zavřít (wdwPrehravac).

Ovládací tlačítka

Na začátku jsme si ale stanovili, že bychom chtěli mít možnost video i pozastavit a kdykoliv spustit znovu. Přidáme si proto do aplikace další tlačítka a to pro spuštění videa, pro pozastavení videa a pro ukončení přehrávání.

XAML

Tlačítka opět umístíme do naší Grid:

<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>

Do kontejneru jsme přidali další 3 sloupce a umístili do nich požadovaná tlačítka. Zároveň ještě upravíme i <MediaElement>:

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

Změnili jsem 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:

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();
}

Základ máme v podstatě hotový. Příště, v lekci Audio/Video přehrávač v C# a WPF - Úprava kódu, si vylepšíme kód přehrávače a v té další zapracujeme na jeho vzhledu :)


 

Stáhnout

Staženo 58x (366.21 kB)

 

 

Aktivity (6)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!