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:
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 true
hodnotu .
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 false
hodnotu .
Používání metadat
A MediaElement
může používat metadata pro MediaElement.MetadataTitle
a MediaElement.MetadataArtist
MediaElement.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 MediaSource
a tato třída definuje tři statické metody:
-
FromFile
, vrátíFileMediaSource
instanci z argumentustring
. -
FromUri
, vrátíUriMediaSource
instanci z argumentuUri
. -
FromResource
, vrátíResourceMediaSource
instanci z argumentustring
.
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 string
Uri
.
Třída MediaSource
má také tyto odvozené třídy:
-
FileMediaSource
, který slouží k určení místního mediálního souboru z objektustring
. Tato třída máPath
vlastnost, kterou lze nastavit nastring
. Kromě toho má tato třída implicitní operátory pro převodstring
naFileMediaSource
objekt aFileMediaSource
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 naUri
. -
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 nastring
.
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, žeMediaElement
neobsahuje žádné médium. -
Opening
označuje, žeMediaElement
se ověřuje a pokouší se načíst zadaný zdroj. -
Buffering
označuje, žeMediaElement
se načítá médium pro přehrávání. JehoPosition
vlastnost nepřesunou během tohoto stavu. Pokud seMediaElement
video přehrávala, bude se dál zobrazovat poslední zobrazený rámeček. -
Playing
označuje, že seMediaElement
přehrává zdroj médií. -
Paused
indikuje, žeMediaElement
nepřechádá jehoPosition
vlastnost. Pokud seMediaElement
video přehrával, bude i nadále zobrazovat aktuální snímek. -
Stopped
označuje, žeMediaElement
obsahuje médium, ale nepřehrává se nebo pozastavuje. JehoPosition
vlastnost je resetována na hodnotu 0 a nepřechází. -
Failed
značí, žeMediaElement
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ě MediaElement
Play
, Pause
a 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í , Slider
jak 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 Position SeekTo() . |
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.
Související odkazy
.NET MAUI Community Toolkit