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ładnik | Co 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. |
Volume | Głośność od 0 (cisza) do 1 (pełna). |
Position | Aktualna pozycja odtwarzania jako TimeSpan. |
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.)
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.
<ItemGroup>
<Content Include="Media\Video\prezentacja.mp4">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
Content Include="..."Plik ma być dołączony jako zawartość aplikacji, a nie kompilowany.CopyToOutputDirectory = AlwaysPlik 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ą.
<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>
Source="Media/Video/prezentacja.mp4"Ścieżka względna do folderu z programem.LoadedBehavior="Manual"Odtwarzanie ruszy dopiero po kliknięciu Play.Minimum="0" Maximum="1" Value="0.5"Suwak ma ten sam zakres coVolume, 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ę.
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ść)
}
}
}
Odtwarzacz.Play(),Pause(),Stop()Każdy przycisk wywołuje jedną metodę kontrolki.if (Odtwarzacz != null)Suwak zgłaszaValueChangedjuż podczas tworzenia okna, kiedyMediaElementmoże jeszcze nie istnieć. Sprawdzenie chroni przed błędem.Odtwarzacz.Volume = SuwakGlosnosci.ValueSuwak 0–1 steruje głośnością wprost.Position.ToString(@"mm\:ss")ZamieniaTimeSpanna napis „minuty:sekundy”. Dwukropek w formacie zapisujemy z ukośnikiem.DispatcherTimerCo 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
Copy to Output Directory: Do not copy (wartość domyślna)Program się kompiluje, ale przy odtwarzaniu pojawia się „nie znaleziono pliku”.
Copy to Output Directory: Copy alwaysBez kopiowania plik nigdy nie trafia do folderu z gotową aplikacją.
Ścieżka bezwzględna
<MediaElement Source="C:\Users\Ja\wideo.mp4" />Działa tylko na Twoim komputerze. Na komputerze egzaminacyjnym pliku tam nie ma.
<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"`
<MediaElement Source="Media/Video/prezentacja.mp4" />Film rusza sam zaraz po otwarciu okna, zanim użytkownik cokolwiek kliknie.
<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.
Podsumowanie
Co warto zapamiętać
- **
MediaElement** odtwarza audio i wideo, a typ rozpoznaje po rozszerzeniu pliku. - Sterujesz nim przez
Play(),Pause(),Stop(),Volume(0–1) iPosition. LoadedBehavior="Manual"wyłącza automatyczny start.- Plik dołącz do projektu: Build Action → Content i Copy to Output Directory → Copy always.
- 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ę →