Přehrávače médií

Přehrávání médií zahrnuje prohlížení a poslech videa a zvuku prostřednictvím vloženého obsahu na stránce nebo se skupinou jiných ovládacích prvků, či prostřednictvím speciálních prostředí pro režim celé obrazovky.

Uživatelé očekávají základní sadu ovládacích prvků, jako je přehrávání/pozastavení, přeskočení zpět, přeskočení dopředu, které můžete upravit podle potřeby (včetně tlačítek media player, pozadí řídicího panelu a uspořádání ovládacích prvků nebo rozložení).

Snímek obrazovky prvku přehrávače médií s ovládacími prvky přehrávání, který přehrává video s beruškou

Je to správná kontrola?

Pokud chcete přehrávat zvuk nebo video v aplikaci, použijte media player. Pokud chcete zobrazit kolekci obrázků, použijte přepínací zobrazení.

Recommendations

Media player podporuje světlé i tmavé motivy, ale tmavý motiv poskytuje lepší prostředí pro většinu scénářů zábavy. Tmavé pozadí poskytuje lepší kontrast, zejména ve slabém osvětlení, a omezuje ovládací lištu, aby nezasahovala do zážitku ze sledování.

Při přehrávání video obsahu podpořte soustředěné sledování tím, že upřednostníte režim celé obrazovky před vloženým režimem. Zobrazení na celé obrazovce je optimální a možnosti jsou omezené v vloženém režimu.

Pokud máte dostatek místa na obrazovce, zvolte rozložení s dvojitým řádkem. Poskytuje více místa pro ovládací prvky než kompaktní rozložení s jedním řádkem a může být snadnější procházet pomocí různých vstupů.

Výchozí ovládací prvky jsou optimalizované pro přehrávání médií, ale máte možnost přidat vlastní možnosti, které potřebujete k media player, aby bylo pro vaši aplikaci nejlepší prostředí. Další informace o přidávání vlastních ovládacích prvků najdete v tématu Vytvoření vlastních ovládacích prvků přenosu .

Vytvořte přehrávač médií

Důležitá rozhraní API: MediaPlayerElement – třída, MediaTransportControls – třída

Otevřete aplikaci Galerie WinUI 3 a podívejte se na MediaPlayerElement v akci.

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Přidejte do aplikace multimédia vytvořením objektu MediaPlayerElement v JAZYCE XAML a nastavením zdroje na MediaSource , který odkazuje na zvukový soubor nebo videosoubor.

Tento XAML vytvoří MediaPlayerElement a nastaví jeho Source vlastnost na identifikátor URI videosouboru, který je místní pro aplikaci. MediaPlayerElement začne přehrávat, když se stránka načte. Chcete-li zabránit médiím ve spuštění okamžitě, můžete nastavit vlastnost Automatické přehrávání na false.

<MediaPlayerElement x:Name="mediaPlayerElement"
                    Source="ms-appx:///Videos/video1.mp4"
                    Width="400" AutoPlay="True"/>

Tento XAML vytvoří MediaPlayerElement s povolenými integrovanými ovládacími prvky přehrávání a vlastnost AutoPlay je nastavena na false.

<MediaPlayerElement x:Name="mediaPlayerElement"
                    Source="ms-appx:///Videos/video1.mp4"
                    Width="400"
                    AutoPlay="False"
                    AreTransportControlsEnabled="True"/>

Důležité

Nastavení MediaPlayerElement.Source na relativní identifikátor URI (ms-appx/ms-resource) funguje jenom v aplikaci zabalené s projektem Windows Application Packaging. Pokud vaše aplikace nepoužívá projekt balení aplikací Windows, doporučujeme převést relativní identifikátor URI ms-appx:/// na plně vyřešený identifikátor URI file:///. Podívejte se také na části Nastavení zdroje médií a Otevření místních mediálních souborů dále v tomto článku.

Ovládací prvky přenosu médií

MediaPlayerElement má integrované ovládací prvky přenosu, které zpracovávají přehrávání, zastavení, pozastavení, hlasitost, ztlumení, hledání/průběh, skryté titulky a výběr zvukové stopy. Chcete-li povolit tyto ovládací prvky, nastavte AreTransportControlsEnabled na true. Pokud je chcete zakázat, nastavte AreTransportControlsEnabled na false. Ovládací prvky přenosu jsou reprezentovány třídou MediaTransportControls. Ovládací prvky přenosu můžete použít as-isnebo je můžete přizpůsobit různými způsoby. Další informace naleznete v reference třídy MediaTransportControls a Vytvoření vlastních transportních ovládacích prvků.

Ovládací prvky dopravy podporují rozložení s jedním a dvěma řádky. První příklad je rozložení s jedním řádkem s tlačítkem přehrát/pozastavit umístěné na levé straně časové osy médií. Toto rozložení je nejvhodnější pro přehrávání médií přímo ve stránce a kompaktní obrazovky.

Příklad ovládacích prvků MTC, jeden řádek

Rozložení ovládacích prvků s dvojitými řádky (níže) se doporučuje pro většinu scénářů použití, zejména na větších obrazovkách. Toto rozložení poskytuje více místa pro ovládací prvky a usnadňuje práci s časovou osou pro uživatele.

Příklad ovládacích prvků MTC, dvojitý řádek

Ovládací prvky přenosu médií systému

MediaPlayerElement je automaticky integrován se systémovými ovládacími prvky přenosu médií. Ovládací prvky přenosu systémových médií jsou ovládací prvky, které se zobrazí při stisknutí hardwarových kláves médií, jako jsou například tlačítka médií na klávesnicích. Další informace najdete v tématu SystemMediaTransportControls.

Nastavení zdroje médií

Pokud chcete přehrávat soubory v síti nebo soubory vložené v aplikaci, nastavte vlastnost Source na MediaSource s cestou k souboru.

Návod

Pokud chcete otevřít soubory z internetu, musíte deklarovat schopnost Internetu (klient) v manifestu vaší aplikace (Package.appxmanifest). Další informace o deklarování možností najdete v tématu Deklarace funkcí aplikace.

Tento kód se pokusí nastavit Source vlastnost MediaPlayerElement definované v XAML na cestu k souboru zadaného do TextBoxu.

<TextBox x:Name="txtFilePath" Width="400"
         FontSize="20"
         KeyUp="TxtFilePath_KeyUp"
         Header="File path"
         PlaceholderText="Enter file path"/>

private void TxtFilePath_KeyUp(object sender, KeyRoutedEventArgs e)
{
    if (e.Key == Windows.System.VirtualKey.Enter)
    {
        TextBox tbPath = sender as TextBox;

        if (tbPath != null)
        {
            LoadMediaFromString(tbPath.Text);
        }
    }
}

private void LoadMediaFromString(string path)
{
    try
    {
        Uri pathUri = new Uri(path);
        mediaPlayerElement.Source = MediaSource.CreateFromUri(pathUri);
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception.
            // For example: Log error or notify user problem with file
        }
    }
}

Chcete-li nastavit zdroj médií na multimediální soubor vložený v aplikaci, inicializujte Uri s cestou s předponou ms-appx:///, vytvořte MediaSource s tímto Uri a poté nastavte Source na toto Uri. Například u souboru s názvem video1.mp4 , který je v podsložce Videa , by cesta vypadala takto: ms-appx:///Videos/video1.mp4

Důležité

Nastavení MediaPlayerElement.Source na relativní identifikátor URI (ms-appx/ms-resource) funguje jenom v aplikaci zabalené s projektem Windows Application Packaging.

Tento kód nastaví vlastnost Source elementu MediaPlayerElement, který byl dříve definovaný v XAML, na ms-appx:///Videos/video1.mp4.

private void LoadEmbeddedAppFile()
{
    try
    {
        Uri pathUri = new Uri("ms-appx:///Videos/video1.mp4");
        mediaPlayerElement.Source = MediaSource.CreateFromUri(pathUri);
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception.
            // For example: Log error or notify user problem with file
        }
    }
}

Otevření místních mediálních souborů

Pokud chcete otevřít soubory v místním systému nebo v OneDrive, můžete k nastavení zdroje médií použít FileOpenPicker získat soubor a Source nebo můžete programově přistupovat ke složkám médií uživatele.

Pokud vaše aplikace potřebuje přístup bez zásahu uživatele do složek Hudba nebo Video , například pokud vyčíslujete všechny hudební soubory nebo videosoubory v kolekci uživatele a zobrazujete je v aplikaci, musíte deklarovat funkce Knihovna hudby a Knihovna videí . Další informace najdete v tématech Soubory a složky v knihovnách Hudba, Obrázky a Videa.

FileOpenPicker nevyžaduje speciální funkce pro přístup k souborům v místním systému souborů, jako jsou složky Hudba nebo Video uživatele, protože uživatel má úplnou kontrolu nad tím, ke kterému souboru se přistupuje. Z hlediska zabezpečení a ochrany osobních údajů je nejlepší minimalizovat počet funkcí, které vaše aplikace používá.

Otevření místního média pomocí FileOpenPickeru

Zavolejte FileOpenPicker, aby uživatel vybral multimediální soubor.

Pomocí třídy FileOpenPicker vyberte multimediální soubor. Nastavte FileTypeFilter tak, aby určil, které typy souborů FileOpenPicker zobrazuje. Voláním PickSingleFileAsync spusťte výběr souboru a získejte soubor.
Použijte MediaSource k nastavení zvoleného multimediálního souboru jako MediaPlayerElement.Source.

Chcete-li použít StorageFile vrácený z FileOpenPickeru, musíte zavolat metodu CreateFromStorageFile z objektu MediaSource a nastavit ji jako Zdroj MediaPlayerElement. Potom zavolejte Přehrát na MediaPlayerElement.MediaPlayer pro spuštění média.

Tento příklad ukazuje, jak použít FileOpenPicker k výběru souboru a nastavit soubor jako Zdroj MediaPlayerElement.

<MediaPlayerElement x:Name="mediaPlayerElement"/>
...
<Button Content="Choose file" Click="Button_Click"/>

private async void Button_Click(object sender, RoutedEventArgs e)
{
    await SetLocalMedia();
}

async private System.Threading.Tasks.Task SetLocalMedia()
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    WinRT.Interop.InitializeWithWindow.Initialize(openPicker, WinRT.Interop.WindowNative.GetWindowHandle(this));

    openPicker.FileTypeFilter.Add(".wmv");
    openPicker.FileTypeFilter.Add(".mp4");
    openPicker.FileTypeFilter.Add(".wma");
    openPicker.FileTypeFilter.Add(".mp3");

    var file = await openPicker.PickSingleFileAsync();

    // mediaPlayerElement is a MediaPlayerElement control defined in XAML
    if (file != null)
    {
        mediaPlayerElement.Source = MediaSource.CreateFromStorageFile(file);

        mediaPlayerElement.MediaPlayer.Play();
    }
}

Nastavení zdroje plakátu

Vlastnost PosterSource můžete použít k poskytnutí mediaPlayerElement vizuální reprezentace před načtením média. PosterSource je obrázek, například snímek obrazovky, filmový plakát nebo obrázek alba, který se zobrazuje namísto média. PosterSource se zobrazí v následujících situacích:

Pokud není nastaven platný zdroj. Například Zdroj není nastaven, Source byl nastaven na null hodnotu, nebo je zdroj neplatný (stejně jako při události MediaFailed).
Při načítání médií. Je například nastaven platný zdroj, ale událost MediaOpened ještě nebyla zjištěna.
Při streamování médií do jiného zařízení.
Když je médium pouze audio.

Zde je MediaPlayerElement s jeho Source nastaven na skladbu alba a jeho PosterSource nastaven na obrázek obalu alba.

<MediaPlayerElement Source="ms-appx:///Media/Track1.mp4" PosterSource="ms-appx:///Media/AlbumCover.png"/>

Zachovat aktivní obrazovku zařízení

Zařízení obvykle ztlumí displej (a nakonec ho vypne), aby ušetřilo výdrž baterie, když je uživatel pryč, ale video apps musí mít zapnutou obrazovku, aby si uživatel mohl video zobrazit. Pokud chcete zabránit deaktivaci zobrazení, když se už nezjistí akce uživatele, například když aplikace přehrává video, můžete volat DisplayRequest.RequestActive. Třída DisplayRequest umožňuje říct Windows, aby byl displej zapnutý, aby uživatel viděl video.

Pokud chcete ušetřit energii a výdrž baterie, měli byste zavolat DisplayRequest.RequestRelease , aby se žádost o zobrazení uvolnila, když už není vyžadována. Windows automaticky deaktivuje aktivní žádosti o zobrazení aplikace, když se aplikace přesune mimo obrazovku, a znovu je aktivuje, když se aplikace vrátí do popředí.

Tady je několik situací, kdy byste měli vydat žádost o zobrazení:

Přehrávání videa je pozastaveno, například akcí uživatele, ukládáním do vyrovnávací paměti nebo úpravou kvůli omezené šířce pásma.
Přehrávání se zastaví. Video se například přestalo přehrávat, nebo prezentace skončila.
Došlo k chybě přehrávání. Například problémy s připojením k síti nebo poškozený soubor.

Chcete-li zachovat aktivní obrazovku

Vytvořte globální proměnnou DisplayRequest . Inicializujte ji na null.
```
private DisplayRequest appDisplayRequest = null;
```
Voláním RequestActive upozorněte Windows, že aplikace vyžaduje, aby zobrazení zůstalo zapnuté.
Zavolejte RequestRelease k uvolnění žádosti o zobrazení pokaždé, když se přehrávání videa zastaví, pozastaví nebo je přerušeno chybou při přehrávání. Pokud už aplikace nemá žádné aktivní požadavky na zobrazení, Windows šetří výdrž baterie tím, že displej ztlumí (a nakonec ho vypne), když se zařízení nepoužívá.

Každý MediaPlayerElement.MediaPlayer má Přehrávací relace typu MediaPlaybackSession, které řídí různé aspekty přehrávání médií, jako je Rychlost přehrávání, Stav přehrávání a Pozice. Zde použijete událost PlaybackStateChanged na MediaPlayer.PlaybackSession k detekci situací, kdy byste měli vydat žádost o zobrazení. Potom pomocí NaturalVideoHeight vlastnost určit, zda se přehrává zvukový soubor nebo videosoubor, a zachovat aktivní obrazovku pouze v případě přehrávání videa.

<MediaPlayerElement x:Name="mediaPlayerElement" Source="ms-appx:///Videos/video1.mp4"/>

public sealed partial class MainWindow : Window
{
    public DisplayRequest appDisplayRequest = null;
    // using Microsoft.UI.Dispatching;
    private DispatcherQueue dispatcherQueue = DispatcherQueue.GetForCurrentThread();

    public MainWindow()
    {
        this.InitializeComponent();
        mediaPlayerElement.MediaPlayer.PlaybackSession.PlaybackStateChanged += 
            PlaybackSession_PlaybackStateChanged;
    }

    private void PlaybackSession_PlaybackStateChanged(MediaPlaybackSession sender, object args)
    {
        MediaPlaybackSession playbackSession = sender as MediaPlaybackSession;
        if (playbackSession != null && playbackSession.NaturalVideoHeight != 0)
        {
            if (playbackSession.PlaybackState == MediaPlaybackState.Playing)
            {
                if (appDisplayRequest is null)
                {
                    dispatcherQueue.TryEnqueue(DispatcherQueuePriority.Normal, () =>
                    {
                        appDisplayRequest = new DisplayRequest();
                        appDisplayRequest.RequestActive();
                    });
                }
            }
            else // PlaybackState is Buffering, None, Opening, or Paused.
            {
                if (appDisplayRequest is not null)
                {
                    appDisplayRequest.RequestRelease();
                    appDisplayRequest = null;
                }
            }
        }
    }
}

Řízení media player programově

MediaPlayerElement poskytuje mnoho vlastností, metod a událostí pro ovládání přehrávání zvuku a videa prostřednictvím MediaPlayerElement.MediaPlayer vlastnost. Úplný seznam vlastností, metod a událostí naleznete v referenční stránce MediaPlayer .

Scénáře pokročilého přehrávání médií

U složitějších scénářů přehrávání médií, jako je přehrávání seznamu stop, přepínání mezi zvukovými jazyky nebo vytváření vlastních stop metadat, nastavte MediaPlayerElement.Source na MediaPlaybackItem nebo MediaPlaybackList. Další informace o tom, jak povolit různé pokročilé funkce médií, najdete na stránce přehrávání médií .

Změna velikosti a roztažení videa

Pomocí vlastnosti Stretch můžete změnit způsob, jakým obsah videa nebo PosterSource vyplní kontejner, ve který se nachází. Tím změníte velikost a roztáhnete video v závislosti na hodnotě Stretch . Stavy Stretch jsou podobné nastavením velikosti obrazu na mnoha televizorech. Můžete ho připojit k tlačítku a povolit uživateli zvolit, které nastavení preferuje.

Žádné nezobrazuje nativní rozlišení obsahu v původní velikosti. To může vést k oříznutí některých videí nebo černých pruhů na okrajích videa.
Uniformní výplň zabírá co nejvíce místa, přičemž zachovává poměr stran a obsah videa. Výsledkem může být vodorovné nebo svislé černé pruhy na okraji videa. Podobá se režimům širokoúhlé obrazovky.
UniformToFill vyplní celý prostor při zachování poměru stran. Výsledkem může být, že některé části videa budou oříznuty. To se podobá režimům zobrazení na celé obrazovce.
Vyplní celý prostor, ale nezachová poměr stran. Žádné video nebude oříznuto, ale může dojít k deformaci. Podobá se to roztažným režimům.

Stretch – hodnoty výčtu

Tady se AppBarButton používá k procházení možností Stretch. Příkaz switch zkontroluje aktuální stav vlastnosti Stretch a nastaví jej na další hodnotu v výčtu Stretch . Umožňuje uživateli procházet rozdílné stavy roztažení.

<AppBarButton Icon="Trim"
              Label="Resize Video"
              Click="PictureSize_Click" />

private void PictureSize_Click(object sender, RoutedEventArgs e)
{
    switch (mediaPlayerElement.Stretch)
    {
        case Stretch.Fill:
            mediaPlayerElement.Stretch = Stretch.None;
            break;
        case Stretch.None:
            mediaPlayerElement.Stretch = Stretch.Uniform;
            break;
        case Stretch.Uniform:
            mediaPlayerElement.Stretch = Stretch.UniformToFill;
            break;
        case Stretch.UniformToFill:
            mediaPlayerElement.Stretch = Stretch.Fill;
            break;
        default:
            break;
    }
}

Povolení přehrávání s nízkou latencí

Nastavte vlastnost RealTimePlayback na hodnotu true na MediaPlayerElement.MediaPlayer, aby se u elementu media player snížila počáteční latence přehrávání. To je důležité pro obousměrné komunikační aplikace a může být použitelné pro některé herní scénáře. Mějte na paměti, že tento režim je náročnější na prostředky a je méně výkonný.

Tento příklad vytvoří MediaPlayerElement a nastaví RealTimePlayback na true.

MediaPlayerElement mediaPlayerElement = new MediaPlayerElement();
mediaPlayerElement.MediaPlayer.RealTimePlayback = true;

Základy návrhu příkazů pro aplikace Windows
Základy návrhu Kontent pro aplikace Windows

Váš názor

Byla tato stránka užitečná?

Last updated on 2026-03-11