Xamarin Community Toolkit MediaElement

  • Artikel

Beispiel herunterladen. Beispiel herunterladen

MediaElement ist eine Ansicht zum Wiedergeben 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 Ressource, die unter Verwendung des URI-Schemas in die ms-appx:/// Plattformanwendung eingebettet ist.
  • 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 Eigene Transportsteuerelemente ersetzt werden. Die folgenden Screenshots zeigen MediaElement die Wiedergabe eines Videos mit den Steuerungen für den Plattformtransport:

Screenshot: MediaElement, das ein Video unter iOS und Android abspielt.

Hinweis

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

MediaElement definiert die folgenden Eigenschaften:

  • Aspectvom Typ Aspectbestimmt, wie die Medien skaliert werden, um dem Anzeigebereich zu entsprechen. Der Standardwert dieser Eigenschaft ist AspectFit.
  • AutoPlayvom Typ boolgibt an, ob die Medienwiedergabe automatisch beginnt, wenn die Source Eigenschaft festgelegt wird. Der Standardwert dieser Eigenschaft ist true.
  • BufferingProgress, vom Typ double, gibt 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 aktuell geöffneten Medien an. Dies ist eine schreibgeschützte Eigenschaft, deren Standardwert ist null.
  • IsLooping, vom Typ bool, beschreibt, ob die aktuell geladene Medienquelle die Wiedergabe von Anfang an fortsetzen soll, nachdem sie ihr Ende erreicht hat. 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.
  • Position, vom Typ TimeSpan, beschreibt 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 des Mediums. Der Standardwert dieser Eigenschaft ist „1“.
  • Source, vom Typ MediaSource, gibt die Quelle der Medien an, die in das Steuerelement geladen werden.
  • VideoHeight, vom Typ int, gibt 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 durch BindableProperty -Objekte 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 ihrer MediaElement Medien abgeschlossen 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.

Enthält außerdem MediaElementPlayMethoden, Pause, und 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.

Remotemedien wiedergeben

Ein MediaElement kann Remotemediendateien mit den 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 werden die medien, die durch die Source -Eigenschaft definiert sind, 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 die Plattformwiedergabesteuerelemente, sofern verfügbar.

Wiedergeben lokaler Medien

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

  • Eine Ressource, die unter Verwendung des URI-Schemas in die ms-appx:/// Plattformanwendung eingebettet ist.
  • 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.

Im App-Paket eingebettete Medien wiedergeben

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

Das Speichern einer Mediendatei im Plattformprojekt unterscheidet sich für jede Plattform:

  • Unter iOS müssen Mediendateien im Ordner "Ressourcen" oder in einem Unterordner des Ordners "Ressourcen" gespeichert werden. Die Mediendatei muss einen Build Action von BundleResourceaufweisen.
  • Unter Android müssen Mediendateien in einem Unterordner von Ressourcen mit dem Namen raw gespeichert werden. Der Ordner raw darf keine Unterordner enthalten. Die Mediendatei muss einen Build Action von AndroidResourceaufweisen.
  • Auf UWP können Mediendateien in jedem Ordner im Projekt gespeichert werden. Die Mediendatei muss einen BuildAction von Contentaufweisen.

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 von 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 einer 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 das Präfix vorangestellt ms-appdata:///roaming/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 ms-appdata-URI-Schema 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 wiedergegeben werden MediaElement.

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 in Auswählen eines Fotos aus der Bildbibliothek definierten Dienst, mit dem Ausnahme, dass die Auswahl einen Dateinamen anstelle eines Stream Objekts zurückgibt. Das Freigegebene Codeprojekt definiert eine Schnittstelle mit dem Namen IVideoPicker, die eine einzelne Methode mit dem Namen GetVideoFileAsyncdefiniert. Jede Plattform implementiert diese Schnittstelle dann in einer VideoPicker Klasse.

Das folgende Codebeispiel zeigt, 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 Videoauswahlabhängigkeitsdienst wird aufgerufen, indem die DependencyService.Get -Methode aufgerufen wird, um die Implementierung einer IVideoPicker Schnittstelle im Plattformprojekt abzurufen. Die GetVideoFileAsync -Methode wird dann für diese 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 skaliert werden, um dem Anzeigebereich zu entsprechen. Standardmäßig ist diese Eigenschaft auf den Enumerationsmember AspectFit festgelegt, kann jedoch auf eines der Aspect Enumerationsmember festgelegt werden:

  • AspectFit gibt an, dass das Video bei Bedarf in den Anzeigebereich eingefügt wird, wobei das Seitenverhältnis beibehalten wird.
  • AspectFill gibt an, dass das Video abgeschnitten wird, sodass es den Anzeigebereich füllt, während 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 Steuerelement (oder ähnliches Slider ) datengebunden sein, um den Fortschritt über das Medium anzuzeigen. Das CommunityToolkit stellt auch ein TimeSpanToDoubleConverter bereit, das einen TimeSpan in einen Gleitkommawert konvertiert, der die Gesamtzahl der verstrichenen Sekunden darstellt. Auf diese Weise können Sie den Schieberegler Maximum auf den Duration des Mediums und auf den Value festlegen, um einen Position 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 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 den Slider zu deaktivieren, wenn das Medium puffert. Weitere Informationen zu Datentriggern finden Sie unter Xamarin.Forms Triggers.

Hinweis

Unter Android verfügt nur über Slider 1.000 diskrete Schritte, unabhängig von den Minimum Einstellungen und Maximum . Wenn die Medienlänge größer als 1000 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 einem string oder Urizurü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 einem 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 eines string in ein FileMediaSource -Objekt und ein FileMediaSource -Objekt in ein string.

Hinweis

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

Bestimmen von MediaElement-status

Die MediaElement -Klasse definiert eine schreibgeschützte bindungsfähige Eigenschaft mit dem Namen CurrentState, vom Typ MediaElementState. Diese Eigenschaft gibt den aktuellen status des Steuerelements an, z. B. ob das Medium wiedergegeben oder angehalten wird oder ob es noch nicht zum Wiedergeben des Mediums bereit ist.

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 zur Wiedergabe geladen werden. Seine Position Eigenschaft wird während dieses Zustands nicht erweitert. Wenn das MediaElement Video wiedergegeben wurde, wird weiterhin der letzte 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 wurde, wird weiterhin der aktuelle Frame angezeigt.
  • Stopped gibt an, dass die 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 Medien um Video handelt, wird der MediaElement erste Frame angezeigt.

Es ist in der Regel nicht erforderlich, die CurrentState -Eigenschaft bei Verwendung der MediaElement Transportsteuerelemente zu untersuchen. Diese Eigenschaft wird jedoch wichtig, wenn Sie Ihre eigenen Transportsteuerelemente implementieren.

Implementieren benutzerdefinierter Transportsteuerelemente

Die Transportsteuerelemente eines Medienplayers 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. Dadurch können Sie das MediaElement Programm steuern oder eigene Transportsteuerelemente bereitstellen. Zur Unterstützung dieser MediaElement Methode gehören PlayMethoden, Pause, und Stop .

Das folgende XAML-Beispiel zeigt eine Seite, die ein MediaElement und benutzerdefinierte Transportsteuerelemente 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 Buttonwiedergaben und anhalten und das zweite Buttonfü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 Triggers.

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 Schaltfläche "Wiedergabe " kann nach der Aktivierung gedrückt werden, um mit der Wiedergabe zu beginnen:

Screenshot: MediaElement mit benutzerdefinierten Transportsteuerelementen unter iOS und Android.

Durch Drücken der Schaltfläche Pause wird die Wiedergabe angehalten:

Screenshot: MediaElement 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ückgerückt.

Implementieren einer benutzerdefinierten Lautstärkesteuerung

Medienwiedergabesteuerelemente, die von jeder Plattform implementiert werden, umfassen eine Volumeleiste. Dieser Balken ähnelt einem Schieberegler und zeigt die Lautstärke des Mediums an. Darüber hinaus können Sie den Volumebalken ä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 dazu, dass sich die Volume Eigenschaft ändert.

Hinweis

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

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