Share via

Xamarin Community Toolkit MediaElement

  • Artikel

Beispiel herunterladen. Herunterladen des Beispiels

MediaElement ist eine Ansicht für die Wiedergabe von Video und Audio. Medien, die von der zugrunde liegenden Plattform unterstützt werden, können aus den folgenden Quellen wiedergegeben werden:

  • Das Web mit einem URI (HTTP oder HTTPS).
  • Eine In die Plattformanwendung eingebettete Ressource, die das ms-appx:/// URI-Schema verwendet.
  • Dateien, die aus den lokalen und temporären Datenordnern der App stammen, verwenden das ms-appdata:/// URI-Schema.
  • Die Bibliothek des Geräts.

MediaElement kann die Plattformwiedergabesteuerelemente verwenden, die als Transportsteuerelemente bezeichnet werden. Sie sind jedoch standardmäßig deaktiviert und können durch Ihre eigenen Transportsteuerelemente ersetzt werden. Die folgenden Screenshots zeigen MediaElement die Wiedergabe eines Videos mit den Plattformtransportsteuerelementen:

Screenshot eines MediaElement-Elements, das ein Video unter iOS und Android abspielt.

Hinweis

MediaElementist unter iOS, Android, dem Universelle Windows-Plattform (UWP), macOS, Windows Presentation Foundation und Tizen verfügbar.

MediaElement definiert die folgenden Eigenschaften:

  • Aspectvom Typ Aspectbestimmt, wie die Medien entsprechend dem Anzeigebereich skaliert werden. Der Standardwert dieser Eigenschaft ist AspectFit.
  • AutoPlayvom Typ boolgibt an, ob die Medienwiedergabe automatisch beginnt, wenn die Source -Eigenschaft festgelegt ist. Der Standardwert dieser Eigenschaft ist true.
  • BufferingProgressvom Typ doublegibt den aktuellen Pufferstatus an. Der Standardwert dieser Eigenschaft ist 0,0.
  • CanSeekvom Typ boolgibt an, ob Medien durch Festlegen des Werts der Position -Eigenschaft neu positioniert werden können. Dies ist eine schreibgeschützte Eigenschaft.
  • CurrentStatevom Typ MediaElementStategibt die aktuelle status des Steuerelements an. Dies ist eine schreibgeschützte Eigenschaft, deren Standardwert ist MediaElementState.Closed.
  • Durationvom Typ TimeSpan?gibt die Dauer der derzeit geöffneten Medien an. Dies ist eine schreibgeschützte Eigenschaft, deren Standardwert ist null.
  • IsLoopingvom Typ boolbeschreibt, ob die aktuell geladene Medienquelle die Wiedergabe von Anfang an fortsetzen soll, nachdem ihr Ende erreicht wurde. Der Standardwert dieser Eigenschaft ist false.
  • KeepScreenOnvom Typ boolbestimmt, ob der Gerätebildschirm während der Medienwiedergabe eingeschaltet bleiben soll. Der Standardwert dieser Eigenschaft ist false.
  • Positionvom Typ TimeSpanbeschreibt den aktuellen Fortschritt während der Wiedergabezeit des Mediums. Diese Eigenschaft verwendet eine TwoWay Bindung, und ihr Standardwert ist TimeSpan.Zero.
  • ShowsPlaybackControlsvom Typ boolbestimmt, ob die Wiedergabesteuerelemente der Plattformen angezeigt werden. Der Standardwert dieser Eigenschaft ist false. Beachten Sie, dass die Steuerelemente unter iOS nur für einen kurzen Zeitraum nach der Interaktion mit dem Bildschirm angezeigt werden. Es gibt keine Möglichkeit, die Steuerelemente jederzeit sichtbar zu halten. In WPF werden keine Systemsteuerelemente unterstützt, sodass diese Eigenschaft keine Auswirkungen hat.
  • Speedvom Typ doublebestimmt die Wiedergabegeschwindigkeit der Medien. Der Standardwert dieser Eigenschaft ist „1“.
  • Sourcevom Typ MediaSourcegibt die Quelle der in das -Steuerelement geladenen Medien an.
  • VideoHeightvom Typ intgibt die Höhe des Steuerelements an. Dies ist eine schreibgeschützte Eigenschaft.
  • VideoWidthvom Typ intgibt die Breite des Steuerelements an. Dies ist eine schreibgeschützte Eigenschaft.
  • Volumevom Typ doublebestimmt das Volumen des Mediums, das auf einer linearen Skala zwischen 0 und 1 dargestellt wird. Diese Eigenschaft verwendet eine TwoWay Bindung, deren Standardwert 1 ist.

Diese Eigenschaften, mit Ausnahme der CanSeek -Eigenschaft, werden von BindableProperty -Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und stilisiert werden können.

Die MediaElement -Klasse definiert auch vier Ereignisse:

  • MediaOpened wird ausgelöst, wenn der Mediendatenstrom überprüft und geöffnet wurde.
  • MediaEnded wird ausgelöst, wenn die Wiedergabe der MediaElement Medien beendet ist.
  • MediaFailed wird ausgelöst, wenn der Medienquelle ein Fehler zugeordnet ist.
  • SeekCompleted wird ausgelöst, wenn der Suchpunkt eines angeforderten Suchvorgangs für die Wiedergabe bereit ist.

Darüber hinaus MediaElement enthält die PlayMethoden , Pauseund Stop .

Informationen zu unterstützten Medienformaten unter Android finden Sie unter Unterstützte Medienformate auf developer.android.com. Informationen zu unterstützten Medienformaten auf der Universelle Windows-Plattform (UWP) finden Sie unter Unterstützte Codecs.

Wiedergeben von Remotemedien

Ein MediaElement kann Remotemediendateien mithilfe der HTTP- und HTTPS-URI-Schemas wiedergeben. Dies wird erreicht, indem Sie die Source -Eigenschaft auf den URI der Mediendatei festlegen:

<MediaElement Source="https://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4"
              ShowsPlaybackControls="True" />

Standardmäßig wird das durch die Source -Eigenschaft definierte Medium unmittelbar nach dem Öffnen des Mediums wiedergegeben. Um die automatische Medienwiedergabe zu unterdrücken, legen Sie die AutoPlay -Eigenschaft auf fest false.

Medienwiedergabesteuerelemente sind standardmäßig deaktiviert und werden durch Festlegen der ShowsPlaybackControls -Eigenschaft auf trueaktiviert. MediaElement verwendet dann, sofern verfügbar, die Steuerelemente für die Plattformwiedergabe.

Wiedergeben lokaler Medien

Lokale Medien können aus den folgenden Quellen wiedergegeben werden:

  • Eine In die Plattformanwendung eingebettete Ressource, die das ms-appx:/// URI-Schema verwendet.
  • Dateien, die aus den lokalen und temporären Datenordnern der App stammen, verwenden das ms-appdata:/// URI-Schema.
  • Die Bibliothek des Geräts.

Weitere Informationen zu diesen URI-Schemas finden Sie unter URI-Schemas.

In das App-Paket eingebettete Medien wiedergeben

Ein MediaElement kann Mithilfe des URI-Schemas Mediendateien wiedergeben, die in das ms-appx:/// App-Paket eingebettet sind. Mediendateien werden in das App-Paket eingebettet, indem sie im Plattformprojekt platziert werden.

Das Speichern einer Mediendatei im Plattformprojekt ist für jede Plattform unterschiedlich:

  • Unter iOS müssen Mediendateien im Ordner Resources oder in einem Unterordner des Ordners Resources gespeichert werden. Die Mediendatei muss über einen Build Action von verfügen BundleResource.
  • Unter Android müssen Mediendateien in einem Unterordner von Resources mit dem Namen raw gespeichert werden. Der Ordner raw darf keine Unterordner enthalten. Die Mediendatei muss über einen Build Action von verfügen AndroidResource.
  • Auf UWP können Mediendateien in einem beliebigen Ordner im Projekt gespeichert werden. Die Mediendatei muss über einen BuildAction von verfügen Content.

Mediendateien, die diese Kriterien erfüllen, können dann mithilfe des ms-appx:/// URI-Schemas wiedergegeben werden:

<MediaElement Source="ms-appx:///XamarinForms101UsingEmbeddedImages.mp4"
              ShowsPlaybackControls="True" />

Bei Verwendung der Datenbindung kann ein Wertkonverter verwendet werden, um dieses URI-Schema anzuwenden:

public class VideoSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return null;

        if (string.IsNullOrWhiteSpace(value.ToString()))
            return null;

        if (Device.RuntimePlatform == Device.UWP)
            return new Uri($"ms-appx:///Assets/{value}");
        else
            return new Uri($"ms-appx:///{value}");
    }
    // ...
}

Ein instance des VideoSourceConverter kann dann verwendet werden, um das ms-appx:/// URI-Schema auf eine eingebettete Mediendatei anzuwenden:

<MediaElement Source="{Binding MediaSource, Converter={StaticResource VideoSourceConverter}}"
              ShowsPlaybackControls="True" />

Weitere Informationen zum ms-appx-URI-Schema finden Sie unter ms-appx und ms-appx-web.

Wiedergeben von Medien aus den lokalen und temporären Ordnern der App

Ein MediaElement kann Mediendateien wiedergeben, die mithilfe des URI-Schemas in die lokalen oder temporären Datenordner der ms-appdata:/// App kopiert werden.

Im folgenden Beispiel wird die Source Eigenschaft auf eine Mediendatei festgelegt, die im lokalen Datenordner der App gespeichert ist:

<MediaElement Source="ms-appdata:///local/XamarinVideo.mp4"
              ShowsPlaybackControls="True" />

Das folgende Beispiel zeigt die Source -Eigenschaft für eine Mediendatei, die im temporären Datenordner der App gespeichert ist:

<MediaElement Source="ms-appdata:///temp/XamarinVideo.mp4"
              ShowsPlaybackControls="True" />

Wichtig

Neben der Wiedergabe von Mediendateien, die in den lokalen oder temporären Datenordnern der App gespeichert sind, kann UWP auch Mediendateien wiedergeben, die sich im Roamingordner der App befinden. Dies kann erreicht werden, indem Der Mediendatei ms-appdata:///roaming/das Präfix vorangestellt wird.

Bei Verwendung der Datenbindung kann ein Wertkonverter verwendet werden, um dieses URI-Schema anzuwenden:

public class VideoSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return null;

        if (string.IsNullOrWhiteSpace(value.ToString()))
            return null;

        return new Uri($"ms-appdata:///{value}");
    }
    // ...
}

Ein instance von VideoSourceConverter kann dann verwendet werden, um das ms-appdata:/// URI-Schema auf eine Mediendatei im lokalen oder temporären Datenordner der App anzuwenden:

<MediaElement Source="{Binding MediaSource, Converter={StaticResource VideoSourceConverter}}"
              ShowsPlaybackControls="True" />

Weitere Informationen zum URI-Schema ms-appdata finden Sie unter ms-appdata.

Kopieren einer Mediendatei in den lokalen oder temporären Datenordner der App

Für die Wiedergabe einer Mediendatei, die im lokalen oder temporären Datenordner der App gespeichert ist, muss die Mediendatei von der App dort kopiert werden. Dies kann beispielsweise durch Kopieren einer Mediendatei aus dem App-Paket erreicht werden:

// This method copies the video from the app package to the app data
// directory for your app. To copy the video to the temp directory
// for your app, comment out the first line of code, and uncomment
// the second line of code.
public static async Task CopyVideoIfNotExists(string filename)
{
    string folder = FileSystem.AppDataDirectory;
    //string folder = Path.GetTempPath();
    string videoFile = Path.Combine(folder, "XamarinVideo.mp4");

    if (!File.Exists(videoFile))
    {
        using (Stream inputStream = await FileSystem.OpenAppPackageFileAsync(filename))
        {
            using (FileStream outputStream = File.Create(videoFile))
            {
                await inputStream.CopyToAsync(outputStream);
            }
        }
    }
}

Hinweis

Im obigen Codebeispiel wird die klasse verwendet, die FileSystem in Xamarin.Essentials enthalten ist. Weitere Informationen finden Sie unter Xamarin.Essentials: Dateisystemhilfsprogramme.

Wiedergeben von Medien aus der Gerätebibliothek

Die meisten modernen mobilen Geräte und Desktopcomputer können Videos und Audiodaten mit der Kamera und dem Mikrofon des Geräts aufzeichnen. Die erstellten Medien werden dann als Dateien auf dem Gerät gespeichert. Diese Dateien können aus der Bibliothek abgerufen und von MediaElementwiedergegeben werden.

Jede der Plattformen enthält eine Funktion, die es dem Benutzer ermöglicht, Medien aus der Bibliothek des Geräts auszuwählen. In Xamarin. Forms können Plattformprojekte diese Funktionalität aufrufen und von der DependencyService -Klasse aufgerufen werden.

Der in der Beispielanwendung verwendete Videoauswahlabhängigkeitsdienst ähnelt dem unter Auswählen eines Fotos aus der Bildbibliothek definierten Dienst, mit der Ausnahme, dass die Auswahl einen Dateinamen und Stream kein Objekt zurückgibt. Das freigegebene Codeprojekt definiert eine Schnittstelle namens IVideoPicker, die eine einzelne Methode namens GetVideoFileAsyncdefiniert. Jede Plattform implementiert diese Schnittstelle dann in einer VideoPicker -Klasse.

Im folgenden Codebeispiel wird gezeigt, wie Sie eine Mediendatei aus der Gerätebibliothek abrufen:

string filename = await DependencyService.Get<IVideoPicker>().GetVideoFileAsync();
if (!string.IsNullOrWhiteSpace(filename))
{
    mediaElement.Source = new FileMediaSource
    {
        File = filename
    };
}

Der Videoauswahl-Abhängigkeitsdienst wird aufgerufen, indem die DependencyService.Get -Methode aufgerufen wird, um die Implementierung einer IVideoPicker Schnittstelle im Plattformprojekt zu erhalten. Die GetVideoFileAsync -Methode wird dann für diesen instance aufgerufen, und der zurückgegebene Dateiname wird verwendet, um ein FileMediaSource -Objekt zu erstellen und auf die Source -Eigenschaft von MediaElementfestzulegen.

Ändern des Videoseitenverhältnisses

Die Aspect -Eigenschaft bestimmt, wie Videomedien entsprechend dem Anzeigebereich skaliert werden. Standardmäßig ist diese Eigenschaft auf den Enumerationsmember AspectFit festgelegt, kann jedoch auf jedes der Aspect Enumerationsmember festgelegt werden:

  • AspectFit gibt an, dass das Video bei Bedarf in den Anzeigebereich eingepasst wird, wobei das Seitenverhältnis beibehalten wird.
  • AspectFill gibt an, dass das Video beschnitten wird, sodass es den Anzeigebereich ausfüllt, wobei das Seitenverhältnis beibehalten wird.
  • Fill gibt an, dass das Video gestreckt wird, um den Anzeigebereich zu füllen.

Bindung an die Position-Eigenschaft

Die Eigenschaftsänderungsbenachrichtigung für die bindbare Eigenschaft wird während der Position Wiedergabe in Intervallen von 200 ms ausgelöst. Daher kann die -Eigenschaft an ein Slider Steuerelement (oder ähnliches) datengebunden sein, um den Fortschritt über die Medien anzuzeigen. Das CommunityToolkit stellt auch ein TimeSpanToDoubleConverter bereit, das eine TimeSpan in einen Gleitkommawert konvertiert, der die Gesamtanzahl verstrichener Sekunden darstellt. Auf diese Weise können Sie den Schieberegler Maximum auf die Duration der Medien und auf die ValuePosition festlegen, um einen genauen Fortschritt bereitzustellen:

<?xml version="1.0" encoding="UTF-8"?>
<pages:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
                xmlns:pages="clr-namespace:Xamarin.CommunityToolkit.Sample.Pages"
                x:Class="Xamarin.CommunityToolkit.Sample.Pages.Views.MediaElementPage">
    <pages:BasePage.Resources>
        <xct:TimeSpanToDoubleConverter x:Key="TimeSpanConverter"/>
    </pages:BasePage.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <xct:MediaElement
            x:Name="mediaElement"
            Source="https://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4"
            ShowsPlaybackControls="True"
            HorizontalOptions="Fill"
            SeekCompleted="OnSeekCompleted" />
        <Slider Grid.Row="1" BindingContext="{x:Reference mediaElement}" Value="{Binding Position, Converter={StaticResource TimeSpanConverter}}" Maximum="{Binding Duration, Converter={StaticResource TimeSpanConverter}}">
            <Slider.Triggers>
                <DataTrigger TargetType="Slider"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static MediaElementState.Buffering}">
                    <Setter Property="IsEnabled" Value="False" />
                </DataTrigger>
            </Slider.Triggers>
        </Slider>
        <Button Grid.Row="2" Text="Reset Source (Set Null)" Clicked="OnResetClicked" />
    </Grid>
</pages:BasePage>

In diesem Beispiel ist die Maximum -Eigenschaft von Slider datengebunden an die Duration -Eigenschaft von MediaElement und die Value -Eigenschaft des Slider -Objekts ist datengebunden an die Position -Eigenschaft von MediaElement. Ziehen Sie daher die Ergebnisse, um die Slider Medienwiedergabeposition zu ändern:

Screenshot eines MediaElement-Elements mit einer Positionsleiste unter iOS und Android.

Darüber hinaus wird ein DataTrigger -Objekt verwendet, um die Slider zu deaktivieren, wenn das Medium puffert. Weitere Informationen zu Datentriggern finden Sie unter Xamarin.Forms Trigger.

Hinweis

Unter Android verfügt nur über Slider 1.000 separate Schritte, unabhängig von den Minimum Einstellungen und Maximum . Wenn die Medienlänge größer als 1.000 Sekunden ist, würden zwei unterschiedliche Position Werte dem gleichen Value entsprechen Slider. Aus diesem Grund überprüft der obige Code, ob die neue Position und die vorhandene Position größer als ein Hundertstel der Gesamtdauer sind.

Grundlegendes zu MediaSource-Typen

Ein MediaElement kann Medien wiedergeben, indem seine Source Eigenschaft auf eine Remote- oder lokale Mediendatei festgelegt wird. Die Source -Eigenschaft ist vom Typ MediaSource, und diese Klasse definiert zwei statische Methoden:

  • FromFilegibt einen MediaSource instance aus einem string Argument zurück.
  • FromUrigibt einen MediaSource instance aus einem Uri Argument zurück.

Darüber hinaus verfügt die MediaSource -Klasse auch über implizite Operatoren, die Instanzen von string - und Uri -Argumenten zurückgebenMediaSource.

Hinweis

Wenn die Source -Eigenschaft in XAML festgelegt ist, wird ein Typkonverter aufgerufen, um eine MediaSource instance von oder stringUrizurückzugeben.

Die MediaSource -Klasse verfügt außerdem über zwei abgeleitete Klassen:

  • UriMediaSource, die verwendet wird, um eine Remotemediendatei aus einem URI anzugeben. Diese Klasse verfügt über eine Uri -Eigenschaft, die auf festgelegt Uriwerden kann.
  • FileMediaSource, das verwendet wird, um eine lokale Mediendatei aus einer stringanzugeben. Diese Klasse verfügt über eine File -Eigenschaft, die auf festgelegt stringwerden kann. Darüber hinaus verfügt diese Klasse über implizite Operatoren zum Konvertieren von in string ein FileMediaSource -Objekt und ein FileMediaSource -Objekt in ein string.

Hinweis

Wenn ein FileMediaSource Objekt in XAML erstellt wird, wird ein Typkonverter aufgerufen, um einen FileMediaSource instance von zurückzugebenstring.

Bestimmen der MediaElement-status

Die MediaElement -Klasse definiert eine schreibgeschützte bindbare Eigenschaft namens CurrentStatevom Typ MediaElementState. Diese Eigenschaft gibt die aktuelle status des Steuerelements an, z. B. ob das Medium wiedergegeben oder angehalten wird oder ob es noch nicht bereit ist, die Medien wiederzugeben.

Die MediaElementState-Enumeration definiert die folgenden Member:

  • Closed gibt an, dass keine MediaElement Medien enthalten sind.
  • Opening gibt an, dass die MediaElement überprüft und versucht, die angegebene Quelle zu laden.
  • Buffering gibt an, dass die MediaElement Medien für die Wiedergabe geladen werden. Die Position -Eigenschaft wird während dieses Zustands nicht erweitert. Wenn das MediaElement Video wiedergegeben hat, wird weiterhin der zuletzt angezeigte Frame angezeigt.
  • Playing gibt an, dass die MediaElement Medienquelle wiedergegeben wird.
  • Paused gibt an, dass die MediaElement - Position Eigenschaft nicht vorankommt. Wenn das MediaElement Video wiedergegeben hat, wird weiterhin der aktuelle Frame angezeigt.
  • Stopped gibt an, dass das MediaElement Medien enthält, aber nicht wiedergegeben oder angehalten wird. Seine Position Eigenschaft ist 0 und kommt nicht voran. Wenn es sich bei dem geladenen Medium um Video handelt, wird der MediaElement erste Frame angezeigt.

Es ist im Allgemeinen nicht erforderlich, die CurrentState -Eigenschaft zu untersuchen, wenn Sie die MediaElement Transportsteuerelemente verwenden. Diese Eigenschaft wird jedoch wichtig, wenn Sie Ihre eigenen Transportsteuerelemente implementieren.

Implementieren von benutzerdefinierten Transportsteuerelementen

Die Transportsteuerelemente eines Media Players umfassen die Schaltflächen, die die Funktionen Wiedergeben, Anhalten und Beenden ausführen. In der Regel werden diese Schaltflächen mit bekannten Symbolen anstelle von Text dargestellt, und die Funktionen Wiedergabe und Pause werden in eine Schaltfläche kombiniert.

Standardmäßig sind die MediaElement Wiedergabesteuerelemente deaktiviert. Auf diese Weise können Sie die MediaElement Steuerung programmgesteuert oder durch Bereitstellen eigener Transportsteuerelemente steuern. Zur Unterstützung dieser MediaElement Methode gehören die PlayMethoden , Pauseund Stop .

Das folgende XAML-Beispiel zeigt eine Seite, die benutzerdefinierte MediaElement Transportsteuerelemente und enthält:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MediaElementDemos.CustomTransportPage"
             Title="Custom transport">
    <Grid>
        ...
        <MediaElement x:Name="mediaElement"
                      AutoPlay="False"
                      ... />
        <StackLayout BindingContext="{x:Reference mediaElement}"
                     ...>
            <Button Text="&#x25B6;&#xFE0F; Play"
                    HorizontalOptions="CenterAndExpand"
                    Clicked="OnPlayPauseButtonClicked">
                <Button.Triggers>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static MediaElementState.Playing}">
                        <Setter Property="Text"
                                Value="&#x23F8; Pause" />
                    </DataTrigger>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static MediaElementState.Buffering}">
                        <Setter Property="IsEnabled"
                                Value="False" />
                    </DataTrigger>
                </Button.Triggers>
            </Button>
            <Button Text="&#x23F9; Stop"
                    HorizontalOptions="CenterAndExpand"
                    Clicked="OnStopButtonClicked">
                <Button.Triggers>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static MediaElementState.Stopped}">
                        <Setter Property="IsEnabled"
                                Value="False" />
                    </DataTrigger>
                </Button.Triggers>
            </Button>
        </StackLayout>
    </Grid>
</ContentPage>

In diesem Beispiel werden die benutzerdefinierten Transportsteuerelemente als Button -Objekte definiert. Es gibt jedoch nur zwei Button Objekte, wobei das erste Button für Wiedergabe und Pause und das zweite Button für Stop steht. DataTrigger -Objekte werden verwendet, um die Schaltflächen zu aktivieren und zu deaktivieren und um die erste Schaltfläche zwischen Wiedergabe und Pause zu wechseln. Weitere Informationen zu Datentriggern finden Sie unter Xamarin.Forms Trigger.

Die CodeBehind-Datei enthält die Handler für die Clicked Ereignisse:

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();
}

Die Wiedergabeschaltfläche kann nach der Aktivierung gedrückt werden, um mit der Wiedergabe zu beginnen:

Screenshot eines MediaElement mit benutzerdefinierten Transportsteuerelementen unter iOS und Android.

Wenn Sie die Schaltfläche Anhalten drücken , wird die Wiedergabe angehalten:

Screenshot eines MediaElement-Elements mit angehaltener Wiedergabe unter iOS und Android.

Durch Drücken der Schaltfläche Beenden wird die Wiedergabe beendet und die Position der Mediendatei an den Anfang zurückgegeben.

Implementieren einer benutzerdefinierten Lautstärkeregelung

Medienwiedergabesteuerelemente, die von jeder Plattform implementiert werden, umfassen eine Lautstärkeleiste. Diese Leiste ähnelt einem Schieberegler und zeigt die Lautstärke der Medien an. Darüber hinaus können Sie die Lautstärkeleiste ändern, um die Lautstärke zu erhöhen oder zu verringern.

Eine benutzerdefinierte Volumeleiste kann mithilfe von Sliderimplementiert werden, wie im folgenden Beispiel gezeigt:

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

In diesem Beispiel binden die Slider Daten ihre Value -Eigenschaft an die Volume -Eigenschaft von MediaElement. Dies ist möglich, da die Volume -Eigenschaft eine TwoWay Bindung verwendet. Daher führt das Ändern der Value Eigenschaft zu einer Änderung der Volume Eigenschaft.

Hinweis

Die Volume Eigenschaft verfügt über einen Überprüfungsrückruf, der sicherstellt, dass ihr Wert größer oder gleich 0,0 und kleiner oder gleich 1,0 ist.

Weitere Informationen zur Verwendung eines Slider finden Sie unter Xamarin.Forms Schieberegler