Sdílet prostřednictvím


MediaElement

MediaElement je ovládací prvek pro přehrávání videa a zvuku. Média podporovaná podkladovou platformou je možné přehrát z následujících zdrojů:

  • Web s použitím identifikátoru URI (HTTP nebo HTTPS).
  • Prostředek vložený do aplikace platformy pomocí schématu identifikátoru embed:// URI.
  • Soubory, které pocházejí z místního systému souborů aplikace, pomocí schématu identifikátoru filesystem:// URI.

MediaElement může používat ovládací prvky přehrávání platformy, které jsou označovány jako ovládací prvky přenosu. Ve výchozím nastavení jsou však zakázané a dají se nahradit vlastními ovládacími prvky přenosu. Následující snímky obrazovky ukazují MediaElement přehrávání videa s ovládacími prvky přenosu platformy:

Snímek obrazovky mediaElement přehrávaného videa v Androidu a iOSu

Poznámka:

MediaElement je k dispozici v systémech iOS, Android, Windows, macOS a Tizen.

Používá MediaElement následující implementace platformy.

Platforma Implementace přehrávače médií platformy
Android ExoPlayer, velký poděkování knihovny Android správci!
iOS/macOS AVPlayer
Windows MediaPlayer

Začínáme

Pokud chcete použít MediaElement funkci sady nástrojů .NET MAUI Community Toolkit, je potřeba provést následující kroky.

Instalace balíčku NuGet

Než budete moct používat MediaElement uvnitř aplikace, budete muset nainstalovat CommunityToolkit.Maui.MediaElement balíček NuGet a do MauiProgram.cs přidat inicializační řádek. Následovně:

Název balíčku:CommunityToolkit.Maui.MediaElement

Adresa URL balíčku:https://www.nuget.org/packages/CommunityToolkit.Maui.MediaElement

Inicializace balíčku

Nejprve je potřeba přidat příkaz using na začátek souboru MauiProgram.cs .

using CommunityToolkit.Maui.MediaElement;

Aby bylo možné správně použít MediaElement metodu UseMauiCommunityToolkitMediaElement , musí být volána ve MauiAppBuilder třídě při spuštění aplikace MauiProgram.cs soubor. Následující příklad ukazuje, jak to provést.

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .UseMauiCommunityToolkitMediaElement()

Další informace o tom, jak to udělat, najdete na stránce Začínáme .

Inicializace specifická pro platformu

Pro přístup k funkcím MediaElement se vyžaduje následující nastavení specifické pro platformu.

Při použití MediaElement je nezbytné provést následující kroky:

1. Přidání ResizableActivity a Launchmode do aktivity

[Activity(Theme = "@style/Maui.SplashTheme", ResizeableActivity = true, MainLauncher = true, LaunchMode = LaunchMode.SingleTask)]
public class MainActivity : MauiAppCompatActivity
{
}

2. Do značky AndroidManifest.xml přidejte následující <application> kód.

 <service android:name="communityToolkit.maui.media.services" android:stopWithTask="true" android:exported="false" android:enabled="true" android:foregroundServiceType="mediaPlayback">
   <intent-filter>
     <action android:name="androidx.media3.session.MediaSessionService"/>
   </intent-filter>
 </service>

3. Aktualizace minimální verze rozhraní ANDROID API

V souboru .csproj projektu aktualizujte minimální verzi rozhraní ANDROID API na 26.

<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">26.0</SupportedOSPlatformVersion>

4. Přidejte následující oprávnění k AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
<uses-permission android:name="android.permission.MEDIA_CONTENT_CONTROL" />

Tady je příklad požadovaných nastavení v části AndroidManifest.xml

<service android:name="communityToolkit.maui.media.services" android:stopWithTask="true" android:exported="false" android:enabled="true" android:foregroundServiceType="mediaPlayback">
    <intent-filter>
        <action android:name="androidx.media3.session.MediaSessionService"/>
    </intent-filter>
</service>
</application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"/>
<uses-permission android:name="android.permission.MEDIA_CONTENT_CONTROL"/>

Poznámka:

Tato úprava manifestu Androidu umožňuje zobrazení metadat při přehrávání videa. Poskytuje podporu pro oznámení a je zásadní pro to, aby oznámení fungovala ve všech relevantních rozhraních API. Tato změna zavádí službu a uděluje potřebná oprávnění.

Úplný příklad této metody, která je součástí aplikace, najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

Podporované formáty

Podporované multimediální formáty se můžou lišit pro každou platformu. V některých případech může být dokonce závislé na tom, jaké dekodéry jsou k dispozici nebo nainstalovány v operačním systému, který se používá při spuštění aplikace. Podrobnější informace o tom, které formáty jsou podporovány na jednotlivých platformách, najdete na následujících odkazech.

Platforma Odkaz Notes
Android Podporované formáty ExoPlayer
iOS/macOS Podporované formáty pro iOS/macOS Neexistuje žádná oficiální dokumentace k tomuto
Windows Podporované formáty Windows V systému Windows jsou podporované formáty velmi závislé na tom, jaké kodeky jsou nainstalovány na počítači uživatele.
Tizen Podporované formáty Tizen

Důležité

Pokud uživatel používá edici Windows N, není ve výchozím nastavení podporováno přehrávání videa. Edice Windows N nemají žádné formáty přehrávání videa nainstalované podle návrhu.

Obvyklé scénáře

Následující části se týkají běžných scénářů použití rozhraní MediaElement.

Přehrávání vzdáleného média

Pomocí MediaElement schémat HTTP a HTTPS URI lze přehrávat vzdálené mediální soubory. Toho dosáhnete nastavením Source vlastnosti na identifikátor URI multimediálního souboru:

<toolkit:MediaElement Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
              ShouldShowPlaybackControls="True" />

Důležité

Při přehrávání vzdálených zdrojů z koncových bodů HTTP budete pravděpodobně muset zakázat bezpečnostní opatření operačního systému, která brání přístupu k nezabezpečeným webovým koncovým bodům. To platí alespoň pro iOS a Android.

Ve výchozím nastavení se multimédia definovaná Source vlastností nespustí do přehrávání po otevření média. Chcete-li povolit automatické přehrávání médií, nastavte ShouldAutoPlay vlastnost na truehodnotu .

Ovládací prvky přehrávání médií poskytované platformou jsou ve výchozím nastavení povoleny a lze je zakázat nastavením ShouldShowPlaybackControls vlastnosti na falsehodnotu .

Používání metadat

A MediaElement může používat metadata pro MediaElement.MetadataTitlea MediaElement.MetadataArtistMediaElement.MetadataArtworkUrl. Název nebo interpret můžete nastavit tak, aby zobrazoval, co se aktuálně hraje na ovládacích prvcích zamykací obrazovky pro Windows, Mac Catalyst, iOS a Android. Pro zamykací obrazovku můžete nastavit místní nebo vzdálenou adresu URL s kresbou. Aby se zobrazila nejlepší kvalita, měla by být alespoň 1080P. Musí to být adresa URL a musí to být buď .jpg nebo .png

<toolkit:MediaElement 
    MetadataTitle="Title"
    MetadataArtist="Artist"
    MetadataArtworkUrl="http://www.myownpersonaldomain.com/image.jpg" />
    MediaElement.MetadataTitle="Title";
    MediaElement.MetadataArtist="Artist";
    MediaElement.MetadataArtworkUrl="http://www.myownpersonaldomain.com/image.jpg";

Důležité

Metadata můžete nastavit buď v XAML, nebo v kódu. Pokud ho nastavujete v kódu za sebou, musíte nastavit zdroj v kódu za sebou. Zdroj by měl být nastavený jako poslední. Pokud nastavíte metadata v XAML nebo v konstruktoru, můžete tuto poznámku bezpečně ignorovat.

Přehrávání místních médií

Místní média lze přehrávat z následujících zdrojů:

  • Prostředek vložený do aplikace platformy pomocí schématu identifikátoru embed:// URI.
  • Soubory, které pocházejí z místního systému souborů aplikace, pomocí schématu identifikátoru filesystem:// URI.

Poznámka:

Zkratka embed:// a filesystem:// pouze práce z XAML. V kódu prosím použijte MediaSource.FromResource() a MediaSource.FromFile() v uvedeném pořadí. Pomocí těchto metod můžete vynechat embed:// předpony a filesystem:// předpony. Zbytek cesty by měl být stejný.

Přehrávání médií vloženého do balíčku aplikace

Pomocí MediaElement schématu identifikátoru embed:// URI lze přehrávat mediální soubory vložené do balíčku aplikace. Multimediální soubory jsou vloženy do balíčku aplikace jejich umístěním do projektu platformy.

Pokud chcete povolit přehrávání multimediálního souboru z místních prostředků, přidejte soubor do složky Resources/Raw projektu .NET MAUI. Při přidání souboru v kořenovém adresáři by identifikátor URI byl embed://MyFile.mp4.

Soubory můžete umístit také do podsložek. Pokud MyFile.mp4 by byl v Resources/Raw/MyVideos pak identifikátor URI, který se má použít, MediaElement by byl embed://MyVideos/MyFile.mp4.

Příklad použití této syntaxe v JAZYCE XAML najdete níže.

<toolkit:MediaElement Source="embed://MyFile.mp4"
              ShouldShowPlaybackControls="True" />

Principy typů MediaSource

Médium MediaElement lze přehrát nastavením jeho Source vlastnosti na vzdálený nebo místní mediální soubor. Vlastnost Source je typu MediaSourcea tato třída definuje tři statické metody:

  • FromFile, vrátí FileMediaSource instanci z argumentu string .
  • FromUri, vrátí UriMediaSource instanci z argumentu Uri .
  • FromResource, vrátí ResourceMediaSource instanci z argumentu string .

Kromě toho MediaSource třída má také implicitní operátory, které vracejí MediaSource instance z string argumentů a Uri argumenty.

Poznámka:

Source Pokud je vlastnost nastavena v XAML, je vyvolán převaděč typů pro vrácení MediaSource instance z nebo stringUri.

Třída MediaSource má také tyto odvozené třídy:

  • FileMediaSource, který slouží k určení místního mediálního souboru z objektu string. Tato třída má Path vlastnost, kterou lze nastavit na string. Kromě toho má tato třída implicitní operátory pro převod string na FileMediaSource objekt a FileMediaSource objekt na .string
  • UriMediaSource, který se používá k určení vzdáleného multimediálního souboru z identifikátoru URI. Tato třída má Uri vlastnost, kterou lze nastavit na Uri.
  • ResourceMediaSource, který se používá k určení vloženého souboru, který je poskytován prostřednictvím souborů prostředků aplikace. Tato třída má Path vlastnost, kterou lze nastavit na string.

Poznámka:

FileMediaSource Při vytvoření objektu v XAML je vyvolán převaděč typů pro vrácení FileMediaSource instance z objektu string.

Změna poměru stran videa

Vlastnost Aspect určuje, jak se bude video média škálovat tak, aby odpovídala oblasti zobrazení. Ve výchozím nastavení je tato vlastnost nastavena na člen výčtu AspectFit , ale může být nastavena na některý z členů výčtu Aspect :

  • AspectFit indikuje, že video bude v případě potřeby vejít do oblasti zobrazení a zachovat poměr stran.
  • AspectFill označuje, že video bude oříznuto tak, aby vyplnil oblast zobrazení a zachoval poměr stran.
  • Fill označuje, že video bude roztaženo tak, aby vyplnilo oblast zobrazení.

Určení MediaElement stavu

Třída MediaElement definuje vlastnost bindable jen pro čtení s názvem CurrentState, typu MediaElementState. Tato vlastnost označuje aktuální stav ovládacího prvku, například jestli je médium přehrávané nebo pozastavené, nebo pokud ještě není připravené k přehrávání média.

Výčet MediaElementState definuje následující členy:

  • None indikuje, že MediaElement neobsahuje žádné médium.
  • Opening označuje, že MediaElement se ověřuje a pokouší se načíst zadaný zdroj.
  • Buffering označuje, že MediaElement se načítá médium pro přehrávání. Jeho Position vlastnost nepřesunou během tohoto stavu. Pokud se MediaElement video přehrávala, bude se dál zobrazovat poslední zobrazený rámeček.
  • Playing označuje, že se MediaElement přehrává zdroj médií.
  • Paused indikuje, že MediaElement nepřechádá jeho Position vlastnost. Pokud se MediaElement video přehrával, bude i nadále zobrazovat aktuální snímek.
  • Stopped označuje, že MediaElement obsahuje médium, ale nepřehrává se nebo pozastavuje. Jeho Position vlastnost je resetována na hodnotu 0 a nepřechází.
  • Failed značí, že MediaElement se nepodařilo načíst nebo přehrát médium. K tomu může dojít při pokusu o načtení nové položky média, při pokusu o přehrání položky média nebo při přerušení přehrávání multimédií kvůli selhání. MediaFailed Pomocí události můžete načíst další podrobnosti.

Při použití ovládacích CurrentState prvků přenosu obvykle není nutné vlastnost zkoumatMediaElement. Tato vlastnost se však stane důležitou při implementaci vlastních ovládacích prvků přenosu.

Implementace vlastních ovládacích prvků přenosu

Ovládací prvky přenosu přehrávače médií zahrnují tlačítka, která provádějí funkce Přehrát, Pozastavit a Zastavit. Tato tlačítka jsou obecně identifikována známými ikonami místo textu a funkce Přehrát a Pozastavit se obvykle zkombinují do jednoho tlačítka.

Ve výchozím nastavení MediaElement jsou ovládací prvky přehrávání zakázané. To vám umožní řídit programově MediaElement nebo pomocí vlastních ovládacích prvků přenosu. Podporuje se to včetně MediaElementPlay, Pausea Stop metod.

Následující příklad XAML ukazuje stránku, která obsahuje MediaElement a vlastní ovládací prvky přenosu:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MediaElementDemos.CustomTransportPage"
             Title="Custom transport">
    <Grid>
        ...
        <toolkit:MediaElement x:Name="mediaElement"
                      ShouldAutoPlay="False"
                      ... />
        <HorizontalStackLayout BindingContext="{x:Reference mediaElement}"
                     ...>
            <Button Text="Play"
                    HorizontalOptions="Center"
                    Clicked="OnPlayPauseButtonClicked">
                <Button.Triggers>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static toolkit:MediaElementState.Playing}">
                        <Setter Property="Text"
                                Value="Pause" />
                    </DataTrigger>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static toolkit:MediaElementState.Buffering}">
                        <Setter Property="IsEnabled"
                                Value="False" />
                    </DataTrigger>
                </Button.Triggers>
            </Button>
            <Button Text="Stop"
                    HorizontalOptions="Center"
                    Clicked="OnStopButtonClicked">
                <Button.Triggers>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static toolkit:MediaElementState.Stopped}">
                        <Setter Property="IsEnabled"
                                Value="False" />
                    </DataTrigger>
                </Button.Triggers>
            </Button>
        </HorizontalStackLayout>
    </Grid>
</ContentPage>

V tomto příkladu jsou vlastní ovládací prvky přenosu definovány jako Button objekty. Existují však pouze dva Button objekty, přičemž první Button představuje Přehrávání a Pozastavit a druhý Button představuje stopu. DataTrigger objekty slouží k povolení a zakázání tlačítek a k přepnutí prvního tlačítka mezi funkcí Přehrát a Pozastavit. Další informace o aktivačních událostech dat najdete v tématu Triggery .NET MAUI.

Soubor kódu má obslužné rutiny pro Clicked události:

void OnPlayPauseButtonClicked(object sender, EventArgs args)
{
    if (mediaElement.CurrentState == MediaElementState.Stopped ||
        mediaElement.CurrentState == MediaElementState.Paused)
    {
        mediaElement.Play();
    }
    else if (mediaElement.CurrentState == MediaElementState.Playing)
    {
        mediaElement.Pause();
    }
}

void OnStopButtonClicked(object sender, EventArgs args)
{
    mediaElement.Stop();
}

Tlačítko Přehrát lze stisknout, jakmile se povolí, a začít přehrávat. Když stisknete tlačítko Pozastavit , dojde k pozastavení přehrávání. Stisknutím tlačítka Zastavit zastavíte přehrávání a vrátíte pozici multimediálního souboru na začátek.

Implementace vlastního ovládacího prvku svazku

Ovládací prvky přehrávání médií implementované jednotlivými platformami zahrnují panel hlasitosti. Tento pruh se podobá posuvníku a zobrazuje hlasitost média. Kromě toho můžete manipulovat s pruhem hlasitosti a zvýšit nebo snížit hlasitost.

Vlastní panel svazků lze implementovat pomocí , Sliderjak je znázorněno v následujícím příkladu:

<StackLayout>
    <toolkit:MediaElement ShouldAutoPlay="False"
                          Source="{StaticResource AdvancedAsync}" />
    <Slider Maximum="1.0"
            Minimum="0.0"
            Value="{Binding Volume}"
            Rotation="270"
            WidthRequest="100" />
</StackLayout>

V tomto příkladu Slider data svázají svou Value vlastnost s Volume vlastností objektu MediaElement. To je možné, protože Volume vlastnost používá TwoWay vazbu. Value Změna vlastnosti proto způsobí Volume změnu vlastnosti.

Poznámka:

Vlastnost Volume má ověřovací zpětné volání, které zajišťuje, že jeho hodnota je větší nebo rovna 0,0 a menší než nebo rovno 1,0.

Další informace o použití posuvníku Slider.NET MAUI

Vyčištění MediaElement prostředků

Chcete-li zabránit nevrácené paměti, budete muset uvolnit prostředky MediaElement. To lze provést odpojením obslužné rutiny. Tam, kde to potřebujete udělat, závisí na tom, kde a jak v aplikaci používáte MediaElement , ale obvykle pokud máte MediaElement na jedné stránce médium a nepřehráváte multimédia na pozadí, chcete uvolnit prostředky, když uživatel přejde mimo stránku.

Níže najdete fragment ukázkového kódu, který ukazuje, jak to udělat. Nejprve nezapomeňte připojit Unloaded událost na stránce.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="MediaElementDemos.FreeResourcesPage"
             Title="Free Resources"
             Unloaded="ContentPage_Unloaded">
    
    <toolkit:MediaElement x:Name="mediaElement"
                          ShouldAutoPlay="False"
                          ... />
</ContentPage>

Pak v kódu zavolat metodu pro odpojení obslužné rutiny.

public partial class FreeResourcesPage : ContentPage
{
    void ContentPage_Unloaded(object? sender, EventArgs e)
    {
        // Stop and cleanup MediaElement when we navigate away
        mediaElement.Handler?.DisconnectHandler();
    }
}

Další informace o obslužných rutinách najdete v dokumentaci k rozhraní .NET MAUI o obslužných rutinách.

Vlastnosti

Vlastnost Type Popis Výchozí hodnota
Aspekt Aspekt Určuje režim škálování pro aktuálně načtené médium (vizuál). Toto je vlastnost s možností vazby. Aspect.AspectFit
Aktuální stav MediaElementState Označuje aktuální stav ovládacího prvku. Jedná se o vlastnost určenou jen pro čtení. MediaElementState.None
Doba trvání TimeSpan Určuje dobu trvání aktuálně otevřených médií. Jedná se o vlastnost určenou jen pro čtení. TimeSpan.Zero
Position TimeSpan Popisuje aktuální průběh přehrávání média. Jedná se o vlastnost určenou jen pro čtení. Pokud chcete nastavit metodu PositionSeekTo() . TimeSpan.Zero
ShouldAutoPlay bool Určuje, zda se přehrávání médií spustí automaticky při Source nastavení vlastnosti. Toto je vlastnost s možností vazby. false
ShouldLoopPlayback bool Popisuje, jestli má aktuálně načtený zdroj médií pokračovat v přehrávání od začátku po dosažení jeho konce. Toto je vlastnost s možností vazby. false
ShouldKeepScreenOn bool Určuje, jestli má obrazovka zařízení zůstat zapnutá během přehrávání multimédií. Toto je vlastnost s možností vazby. false
Ztlumení bool Určuje, jestli je zvuk aktuálně ztlumený. Toto je vlastnost s možností vazby. false
ShouldShowPlaybackControls bool Určuje, zda jsou zobrazeny ovládací prvky přehrávání platforem. Toto je vlastnost s možností vazby. Všimněte si, že v iOSu a Windows se ovládací prvky zobrazují jenom po krátkou dobu po interakci s obrazovkou. Ovládací prvky nejsou pořád viditelné. true
Zdroj MediaSource? Zdroj média načteného do ovládacího prvku. null
Rychlost double Určuje rychlost přehrávání média. Toto je vlastnost s možností vazby. 1
MediaHeight int Výška načteného média v pixelech. Jedná se o vlastnost určenou jen pro čtení. Není hlášeno pro jiná vizuální média a nemusí být vždy vyplněno v iOSu nebo macOS pro živý streamovaný obsah. 0
MediaWidth int Šířka načteného média v pixelech. Jedná se o vlastnost určenou jen pro čtení. Není hlášeno pro jiná vizuální média a nemusí být vždy vyplněno v iOSu nebo macOS pro živý streamovaný obsah. 0
Objem double Určuje objem média, který je reprezentován v lineárním měřítku mezi 0 a 1. Toto je vlastnost s možností vazby. 1

Události

Událost Popis
MediaOpened Nastane, když se datový proud médií ověří a otevře.
MediaEnded Nastane, když se MediaElement dokončí přehrávání jeho média.
MediaFailed Nastane, když dojde k chybě přidružené ke zdroji médií.
PositionChanged Nastane, když Position se hodnota vlastnosti změnila.
SeekCompleted Nastane, když je bod hledání požadované operace hledání připravený k přehrávání.

Metody

Událost Popis
Přehrát Spustí přehrávání načteného média.
Pozastavení Pozastaví přehrávání aktuálního média.
Zastavit Zastaví přehrávání a obnoví pozici aktuálního média.
Hledat na TimeSpan Vezme hodnotu k nastavení Position vlastnosti a vezme CancellationToken zrušení Task.

Příklady

Příklady tohoto ovládacího prvku najdete v ukázkové aplikaci .NET MAUI Community Toolkit.

rozhraní API

Zdrojový kód MediaElement najdete v úložišti .NET MAUI Community Toolkit na GitHubu.