Aplikacje desktopowe · Multimedia

Multimedia w WPF: odtwarzanie dźwięku i wideo

Odtwarzacz muzyki, prezentacja multimedialna, aplikacja szkoleniowa: wszystkie potrzebują dźwięku lub filmu. WPF ma do tego gotową kontrolkę MediaElement. Najważniejsze jest jednak coś innego niż kod: żeby plik w ogóle znalazł się obok programu, także na komputerze egzaminacyjnym.

  • około 40 minut
  • WPF · MediaElement
  • INF.04.5.3

Po tej lekcji: osadzić MediaElement, sterować nim (Play, Pause, Stop, Volume) oraz dołączyć plik multimedialny do projektu tak, aby działał także na innym komputerze.

Zacznijmy od egzaminu

Na egzaminie nie ma internetu

Aplikacja do nauki języka może odtwarzać nagrania wymowy po kliknięciu „Odsłuchaj”, a program w muzeum może pokazywać filmy do wybranego eksponatu. W obu przypadkach pliki są dołączone do aplikacji i działają bez internetu.

To ważne na egzaminie: komputer zwykle nie ma sieci, więc pliki multimedialne muszą leżeć w projekcie, a nie być pobierane. Dlatego większość tej lekcji dotyczy nie kodu, a tego, żeby plik trafił do folderu z programem.

1 · Kontrolka

Najważniejsze właściwości i metody MediaElement

SkładnikCo robi
SourceŚcieżka do pliku audio lub wideo. WPF sam rozpoznaje typ po rozszerzeniu.
LoadedBehavior="Manual"Wyłącza automatyczne odtwarzanie, więc sterujesz nim sam z kodu.
Play(), Pause(), Stop()Sterowanie odtwarzaniem.
VolumeGłośność od 0 (cisza) do 1 (pełna).
PositionAktualna pozycja odtwarzania jako TimeSpan.
Domyślnie `MediaElement` zaczyna odtwarzać od razu po załadowaniu. `Manual` pozwala poczekać na kliknięcie.

Laboratorium · ćwiczenie w przeglądarce, do którego odsyłają rozgrzewki na końcu lekcji

2 · Sprawdź w działaniu

Dlaczego plik „nie znajduje się” na komputerze egzaminacyjnym

Uruchom program z ustawieniami domyślnymi (Do not copy) i zobacz błąd. Potem ustaw Copy always i uruchom ponownie. Następnie zmień ścieżkę na bezwzględną i przełącz komputer na egzaminacyjny. Na końcu wyłącz Manual i zobacz, co się dzieje. (Dźwięk to cichy ton testowy, nie prawdziwy plik.)

Ta interakcja wymaga włączonego JavaScriptu.

Program może się skompilować bez błędu i mimo to nie odtworzyć pliku. Zawsze sprawdź *Copy to Output Directory* i używaj ścieżek względnych.

3 · Plik w projekcie

Jak dołączyć plik, żeby działał na każdym komputerze

Te kroki wykonaj dla każdego pliku audio i wideo. Zaznaczaj je w trakcie.

4 · Co robi ten panel

Te ustawienia w pliku .csproj

Kliknięcia w panelu Właściwości zapisują się w pliku projektu. Znajomość tego zapisu przydaje się, gdy ustawienia zniknęły albo chcesz je poprawić ręcznie.

projekt.csproj (fragment)xml
<ItemGroup>
  <Content Include="Media\Video\prezentacja.mp4">
    <CopyToOutputDirectory>Always</CopyToOutputDirectory>
  </Content>
</ItemGroup>
  1. Content Include="..." Plik ma być dołączony jako zawartość aplikacji, a nie kompilowany.
  2. CopyToOutputDirectory = Always Plik zostanie skopiowany do folderu z programem przy każdym budowaniu.

5 · Wygląd

MainWindow.xaml

MediaElement z plikiem z folderu Media/Video, trzy przyciski, suwak głośności i etykieta z pozycją.

MainWindow.xamlxaml
<Window x:Class="AVWpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Odtwarzacz" Height="340" Width="450">
    <StackPanel Margin="20">
        <MediaElement x:Name="Odtwarzacz"
                      Source="Media/Video/prezentacja.mp4"
                      LoadedBehavior="Manual"
                      Height="180" />

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
            <Button Content="Play" Width="80" Margin="5" Click="Play_Click" />
            <Button Content="Pauza" Width="80" Margin="5" Click="Pauza_Click" />
            <Button Content="Stop" Width="80" Margin="5" Click="Stop_Click" />
        </StackPanel>

        <Slider x:Name="SuwakGlosnosci" Minimum="0" Maximum="1" Value="0.5"
                ValueChanged="SuwakGlosnosci_ValueChanged" Margin="0,10,0,0" />
        <TextBlock x:Name="EtykietaPozycja" Text="00:00" HorizontalAlignment="Center" Margin="0,5,0,0" />
    </StackPanel>
</Window>
  1. Source="Media/Video/prezentacja.mp4" Ścieżka względna do folderu z programem.
  2. LoadedBehavior="Manual" Odtwarzanie ruszy dopiero po kliknięciu Play.
  3. Minimum="0" Maximum="1" Value="0.5" Suwak ma ten sam zakres co Volume, więc wartość suwaka można przypisać wprost.

6 · Działanie

MainWindow.xaml.cs

Trzy proste metody sterują odtwarzaniem, a zegar odświeża pozycję.

MainWindow.xaml.cscsharp
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;

namespace AVWpfApp;

public partial class MainWindow : Window
{
    private readonly DispatcherTimer _zegar = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1) };

    public MainWindow()
    {
        InitializeComponent();
        Odtwarzacz.Volume = SuwakGlosnosci.Value;

        _zegar.Tick += (s, e) => EtykietaPozycja.Text = Odtwarzacz.Position.ToString(@"mm\:ss");
        _zegar.Start();
    }

    private void Play_Click(object sender, RoutedEventArgs e)
    {
        Odtwarzacz.Play();
    }

    private void Pauza_Click(object sender, RoutedEventArgs e)
    {
        Odtwarzacz.Pause();
    }

    private void Stop_Click(object sender, RoutedEventArgs e)
    {
        Odtwarzacz.Stop();
    }

    private void SuwakGlosnosci_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        if (Odtwarzacz != null)
        {
            Odtwarzacz.Volume = SuwakGlosnosci.Value;   // od 0 (cisza) do 1 (pełna głośność)
        }
    }
}
  1. Odtwarzacz.Play(), Pause(), Stop() Każdy przycisk wywołuje jedną metodę kontrolki.
  2. if (Odtwarzacz != null) Suwak zgłasza ValueChanged już podczas tworzenia okna, kiedy MediaElement może jeszcze nie istnieć. Sprawdzenie chroni przed błędem.
  3. Odtwarzacz.Volume = SuwakGlosnosci.Value Suwak 0–1 steruje głośnością wprost.
  4. Position.ToString(@"mm\:ss") Zamienia TimeSpan na napis „minuty:sekundy”. Dwukropek w formacie zapisujemy z ukośnikiem.
  5. DispatcherTimer Co sekundę odświeża etykietę pozycji, tak jak w lekcji o timerach.

7 · Czego unikać

Trzy błędy z multimediami

Brak Copy to Output Directory
Tak nie
Copy to Output Directory: Do not copy (wartość domyślna)

Program się kompiluje, ale przy odtwarzaniu pojawia się „nie znaleziono pliku”.

Tak
Copy to Output Directory: Copy always

Bez kopiowania plik nigdy nie trafia do folderu z gotową aplikacją.

Ścieżka bezwzględna
Tak nie
<MediaElement Source="C:\Users\Ja\wideo.mp4" />

Działa tylko na Twoim komputerze. Na komputerze egzaminacyjnym pliku tam nie ma.

Tak
<MediaElement Source="Media/Video/prezentacja.mp4" />

Ścieżka względna wskazuje plik w folderze z programem, który podróżuje razem z nim.

Brak `LoadedBehavior="Manual"`
Tak nie
<MediaElement Source="Media/Video/prezentacja.mp4" />

Film rusza sam zaraz po otwarciu okna, zanim użytkownik cokolwiek kliknie.

Tak
<MediaElement Source="Media/Video/prezentacja.mp4" LoadedBehavior="Manual" />

Manual oddaje Ci kontrolę nad Play(), Pause() i Stop().

8 · Sprawdź się

Multimedia w praktyce

Cztery krótkie sytuacje.

Ta interakcja wymaga włączonego JavaScriptu.

Podsumowanie

Co warto zapamiętać

  1. **MediaElement** odtwarza audio i wideo, a typ rozpoznaje po rozszerzeniu pliku.
  2. Sterujesz nim przez Play(), Pause(), Stop(), Volume (0–1) i Position.
  3. LoadedBehavior="Manual" wyłącza automatyczny start.
  4. Plik dołącz do projektu: Build Action → Content i Copy to Output Directory → Copy always.
  5. Używaj ścieżek względnych, bo na komputerze egzaminacyjnym nie ma Twoich folderów ani internetu.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →
Źródła i dalsza nauka