Xamarin.FormsMedia ElementXamarin.Forms MediaElement

Vorabrelease der API

Beispiel herunterladen Herunterladen des BeispielsDownload Sample Download the sample

MediaElementist eine Ansicht für die Wiedergabe von Video-und Audiodaten.MediaElement is a view for playing video and audio. Medien, die von der zugrunde liegenden Plattform unterstützt werden, können aus den folgenden Quellen wiedergegeben werden:Media that's supported by the underlying platform can be played from the following sources:

  • Das Web unter Verwendung eines URIs (http oder HTTPS).The web, using a URI (HTTP or HTTPS).
  • Eine in die Platt Form Anwendung eingebettete Ressource, die das ms-appx:/// URI-Schema verwendet.A resource embedded in the platform application, using the ms-appx:/// URI scheme.
  • Dateien, die aus den lokalen und temporären Daten Ordnern der APP stammen, mithilfe des ms-appdata:/// URI-Schemas.Files that come from the app's local and temporary data folders, using the ms-appdata:/// URI scheme.
  • Die Bibliothek des Geräts.The device's library.

MediaElementkann die Steuerelemente für die Platt Form Wiedergabe verwenden, die als Transport Steuerelemente bezeichnet werden.MediaElement can use the platform playback controls, which are referred to as transport controls. Sie sind jedoch standardmäßig deaktiviert und können durch ihre eigenen Transport Steuerelemente ersetzt werden.However, they are disabled by default and can be replaced with your own transport controls. Die folgenden Screenshots zeigen, wie Sie MediaElement ein Video mit den Steuerelementen der Plattform-Transport abspielen:The following screenshots show MediaElement playing a video with the platform transport controls:

Screenshot eines Media Element-Videos unter IOS und AndroidScreenshot of a MediaElement playing a video, on iOS and Android

MediaElementist in Xamarin.Forms 4,5 verfügbar.MediaElement is available in Xamarin.Forms 4.5. Es ist jedoch zurzeit experimentell und kann nur verwendet werden, indem der app.XAML.cs -Datei die folgende Codezeile hinzugefügt wird:However, it's currently experimental and can only be used by adding the following line of code to your App.xaml.cs file:

Device.SetFlags(new string[]{ "MediaElement_Experimental" });

Hinweis

MediaElementist unter IOS, Android, den universelle Windows-Plattform (UWP), macOS, Windows Presentation Foundation und tizen verfügbar.MediaElement is available on iOS, Android, the Universal Windows Platform (UWP), macOS, Windows Presentation Foundation, and Tizen.

MediaElementdefiniert die folgenden Eigenschaften:MediaElement defines the following properties:

  • AspectAspectbestimmt, wie die Medien skaliert werden, um dem Anzeigebereich anzupassen.Aspect, of type Aspect, determines how the media will be scaled to fit the display area. Der Standardwert dieser Eigenschaft ist AspectFit.The default value of this property is AspectFit.
  • AutoPlaygibt mit dem Typ an bool , ob die Medienwiedergabe automatisch beginnt, wenn die- Source Eigenschaft festgelegt wird.AutoPlay, of type bool, indicates whether media playback will begin automatically when the Source property is set. Der Standardwert dieser Eigenschaft ist true.The default value of this property is true.
  • BufferingProgressdoublegibt den aktuellen Puffer Status des Typs an.BufferingProgress, of type double, indicates the current buffering progress. Der Standardwert dieser Eigenschaft ist 0,0.The default value of this property is 0.0.
  • CanSeekGibt an, bool ob Medien durch Festlegen des Werts der-Eigenschaft neu positioniert werden können Position .CanSeek, of type bool, indicates whether media can be repositioned by setting the value of the Position property. Dies ist eine schreibgeschützte Eigenschaft.This is a read-only property.
  • CurrentStateMediaElementStategibt den aktuellen Status des Steuer Elements vom Typ an.CurrentState, of type MediaElementState, indicates the current status of the control. Dies ist eine schreibgeschützte Eigenschaft, deren Standardwert ist MediaElementState.Closed .This is a read-only property, whose default value is MediaElementState.Closed.
  • DurationTimeSpan?gibt die Dauer des aktuell geöffneten Mediums an.Duration, of type TimeSpan?, indicates the duration of the currently opened media. Dies ist eine schreibgeschützte Eigenschaft, deren Standardwert ist null .This is a read-only property whose default value is null.
  • IsLoopingGibt an, bool ob die derzeit geladene Medienquelle die Wiedergabe von Anfang an wieder aufnehmen soll, nachdem das Ende erreicht wurde.IsLooping, of type bool, describes whether the currently loaded media source should resume playback from the start after reaching its end. Der Standardwert dieser Eigenschaft ist false.The default value of this property is false.
  • KeepScreenOnboolbestimmt, ob der Bildschirm des Geräts während der Medienwiedergabe eingeschaltet bleiben soll.KeepScreenOn, of type bool, determines whether the device screen should stay on during media playback. Der Standardwert dieser Eigenschaft ist false.The default value of this property is false.
  • Position, vom Typ TimeSpan , beschreibt den aktuellen Fortschritt durch die Wiedergabezeit des Mediums.Position, of type TimeSpan, describes the current progress through the media's playback time. Der Standardwert dieser Eigenschaft ist TimeSpan.Zero.The default value of this property is TimeSpan.Zero.
  • ShowsPlaybackControlslegt vom Typ fest bool , ob die Plattformen Wiedergabe Steuerelemente angezeigt werden.ShowsPlaybackControls, of type bool, determines whether the platforms playback controls are displayed. Der Standardwert dieser Eigenschaft ist false.The default value of this property is false.
  • SourceMediaSourcegibt die Quelle des in das-Steuerelement geladenen Mediums an.Source, of type MediaSource, indicates the source of the media loaded into the control.
  • VideoHeightintgibt die Höhe des Steuer Elements vom Typ an.VideoHeight, of type int, indicates the height of the control. Dies ist eine schreibgeschützte Eigenschaft.This is a read-only property.
  • VideoWidthintgibt die Breite des-Steuer Elements vom Typ an.VideoWidth, of type int, indicates the width of the control. Dies ist eine schreibgeschützte Eigenschaft.This is a read-only property.
  • Volume, vom Typ double , bestimmt das Volume des Mediums, das auf einer linearen Skala zwischen 0 und 1 dargestellt wird.Volume, of type double, determines the media's volume, which is represented on a linear scale between 0 and 1. Diese Eigenschaft verwendet eine TwoWay Bindung, und ihr Standardwert ist 1.This property uses a TwoWay binding, and its default value is 1.

Diese Eigenschaften, mit Ausnahme der- CanSeek Eigenschaft, werden von-Objekten unterstützt BindableProperty . Dies bedeutet, dass Sie Ziele von Daten Bindungen und formatiert sein können.These properties, with the exception of the CanSeek property, are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

Die- MediaElement Klasse definiert außerdem vier Ereignisse:The MediaElement class also defines four events:

  • MediaOpenedwird ausgelöst, wenn der Mediendaten Strom überprüft und geöffnet wurde.MediaOpened is fired when the media stream has been validated and opened.
  • MediaEndedwird ausgelöst, wenn die wieder MediaElement Gabe der Medien beendet.MediaEnded is fired when the MediaElement finishes playing its media.
  • MediaFailedwird ausgelöst, wenn der Medienquelle ein Fehler zugeordnet ist.MediaFailed is fired when there's an error associated with the media source.
  • SeekCompletedwird ausgelöst, wenn der Suchpunkt eines angeforderten Such Vorgangs für die Wiedergabe bereit ist.SeekCompleted is fired when the seek point of a requested seek operation is ready for playback.

Außerdem enthält die MediaElement Play Methoden, Pause und Stop .In addition, MediaElement includes Play, Pause, and Stop methods.

Informationen zu den unterstützten Medienformaten unter Android finden Sie unter Unterstützte Medienformate auf Developer.Android.com.For information about supported media formats on Android, see Supported media formats on developer.android.com. Informationen zu den unterstützten Medienformaten im universelle Windows-Plattform (UWP) finden Sie unter unterstützte Codecs.For information about supported media formats on the Universal Windows Platform (UWP), see Supported codecs.

Wiedergeben von Remote MedienPlay remote media

Eine MediaElement kann Remote Mediendateien mit den HTTP-und HTTPS-URI-Schemas wiedergeben.A MediaElement can play remote media files using the HTTP and HTTPS URI schemes. Dies wird erreicht, indem die- Source Eigenschaft auf den URI der Mediendatei festgelegt wird:This is accomplished by setting the Source property to the URI of the media file:

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

Standardmäßig wird das von der-Eigenschaft definierte Medium Source sofort nach dem Öffnen des Mediums abgespielt.By default, the media that is defined by the Source property plays immediately after the media is opened. Legen Sie die-Eigenschaft auf fest, um die automatische Medienwiedergabe zu unterdrücken AutoPlay falseTo suppress automatic media playback, set the AutoPlay property to false.

Steuerelemente für die Medienwiedergabe werden standardmäßig deaktiviert und aktiviert, indem die-Eigenschaft auf festgelegt wird ShowsPlaybackControls true .Media playback controls are disabled by default, and are enabled by setting the ShowsPlaybackControls property to true. MediaElementverwendet dann die Steuerelemente für die Platt Form Wiedergabe.MediaElement will then use the platform playback controls.

Lokale Medien wiedergebenPlay local media

Lokale Medien können aus den folgenden Quellen wiedergegeben werden:Local media can be played from the following sources:

  • Eine in die Platt Form Anwendung eingebettete Ressource, die das ms-appx:/// URI-Schema verwendet.A resource embedded in the platform application, using the ms-appx:/// URI scheme.
  • Dateien, die aus den lokalen und temporären Daten Ordnern der APP stammen, mithilfe des ms-appdata:/// URI-Schemas.Files that come from the app's local and temporary data folders, using the ms-appdata:/// URI scheme.
  • Die Bibliothek des Geräts.The device's library.

Weitere Informationen zu diesen URI-Schemas finden Sie unter URI-Schemas.For more information about these URI schemes, see URI schemes.

Wiedergeben von Medien, die im App-Paket eingebettet sindPlay media embedded in the app package

Eine MediaElement kann Mediendateien wiedergeben, die mit dem URI-Schema in das App-Paket eingebettet sind ms-appx:/// .A MediaElement can play media files that are embedded in the app package, using the ms-appx:/// URI scheme. Mediendateien werden in das App-Paket eingebettet, indem Sie im Platt Form Projekt platziert werden.Media files are embedded in the app package by placing them in the platform project.

Das Speichern einer Mediendatei im Platt Form Projekt unterscheidet sich für jede Plattform:Storing a media file in the platform project is different for each platform:

  • Unter IOS müssen Mediendateien im Ordner " Resources " oder in einem Unterordner des Ordners " Resources " gespeichert werden.On iOS, media files must be stored in the Resources folder, or a subfolder of the Resources folder. Die Mediendatei muss den-Typ aufweisen Build Action BundleResource .The media file must have a Build Action of BundleResource.
  • Unter Android müssen Mediendateien in einem Unterordner von Ressourcen mit dem Namen RAWgespeichert werden.On Android, media files must be stored in a subfolder of Resources named raw. Der Ordner raw darf keine Unterordner enthalten.The raw folder cannot contain subfolders. Die Mediendatei muss den-Typ aufweisen Build Action AndroidResource .The media file must have a Build Action of AndroidResource.
  • Bei UWP können Mediendateien in einem beliebigen Ordner im Projekt gespeichert werden.On UWP, media files can be stored in any folder in the project. Die Mediendatei muss den-Typ aufweisen BuildAction Content .The media file must have a BuildAction of Content.

Mediendateien, die diese Kriterien erfüllen, können dann mit dem URI-Schema wiedergegeben werden ms-appx:/// :Media files that meet these criteria can then be played back using the ms-appx:/// URI scheme:

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

Wenn Sie die Datenbindung verwenden, kann ein Wert Konverter verwendet werden, um dieses URI-Schema anzuwenden:When using data binding, a value converter can be used to apply this URI scheme:

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}");
    }
    // ...
}

Eine Instanz von VideoSourceConverter kann dann verwendet werden, um das ms-appx:/// URI-Schema auf eine eingebettete Mediendatei anzuwenden:An instance of the VideoSourceConverter can then be used to apply the ms-appx:/// URI scheme to an embedded media file:

<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.For more information about the ms-appx URI scheme, see ms-appx and ms-appx-web.

Wiedergeben von Medien aus den lokalen und temporären Ordnern der APPPlay media from the app's local and temporary folders

Eine MediaElement kann Mediendateien wiedergeben, die mithilfe des URI-Schemas in die lokalen oder temporären Datenordner der APP kopiert werden ms-appdata:/// .A MediaElement can play media files that are copied into the app's local or temporary data folders, using the ms-appdata:/// URI scheme.

Das folgende Beispiel zeigt, wie die Source -Eigenschaft auf eine Mediendatei festgelegt ist, die im lokalen Datenordner der APP gespeichert ist:The following example shows the Source property set to a media file that's stored in the app's local data folder:

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

Im folgenden Beispiel wird die- Source Eigenschaft für eine Mediendatei gezeigt, die im temporären Datenordner der APP gespeichert ist:The following example shows the Source property to a media file that's stored in the app's temporary data folder:

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

Wichtig

Zusätzlich zur Wiedergabe von Mediendateien, die in den lokalen oder temporären Daten Ordnern der APP gespeichert sind, kann UWP auch Mediendateien wiedergeben, die sich im roamingordner der APP befinden.In addition to playing media files that are stored in the app's local or temporary data folders, UWP can also play media files that are located in the app's roaming folder. Dies kann erreicht werden, indem die Mediendatei mit vorangestellt wird ms-appdata:///roaming/ .This can be achieved by prefixing the media file with ms-appdata:///roaming/.

Wenn Sie die Datenbindung verwenden, kann ein Wert Konverter verwendet werden, um dieses URI-Schema anzuwenden:When using data binding, a value converter can be used to apply this URI scheme:

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}");
    }
    // ...
}

Eine Instanz von VideoSourceConverter kann dann verwendet werden, um das ms-appdata:/// URI-Schema auf eine Mediendatei im lokalen oder temporären Datenordner der APP anzuwenden:An instance of the VideoSourceConverter can then be used to apply the ms-appdata:/// URI scheme to a media file in the app's local or temporary data folder:

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

Weitere Informationen zum MS-APPDATA-URI-Schema finden Sie unter MS-APPDATA.For more information about the ms-appdata URI scheme, see ms-appdata.

Kopieren einer Mediendatei in den lokalen oder temporären Datenordner der APPCopying a media file to the app's local or temporary data folder

Wenn Sie eine Mediendatei abspielen, die im lokalen oder temporären Datenordner der APP gespeichert ist, muss die Mediendatei dort von der APP kopiert werden.Playing a media file stored in the app's local or temporary data folder requires the media file to be copied there by the app. Dies kann z. b. durch Kopieren einer Mediendatei aus dem App-Paket erreicht werden:This can be accomplished, for example, by copying a media file from the app package:

// 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 enthalten ist Xamarin.Essentials .The code example above uses the FileSystem class included in Xamarin.Essentials. Weitere Informationen finden Sie unter Xamarin.Essentials Datei System-Hilfsprogramme.For more information, see Xamarin.Essentials: File System Helpers.

Wiedergeben von Medien in der Geräte BibliothekPlay media from the device library

Die meisten modernen mobilen Geräte und Desktop Computer können Videos und Audiodaten mithilfe der Kamera und des Mikrofons des Geräts aufzeichnen.Most modern mobile devices and desktop computers have the ability to record videos and audio using the device's camera and microphone. Die erstellten Medien werden dann als Dateien auf dem Gerät gespeichert.The media that's created are then stored as files on the device. Diese Dateien können aus der Bibliothek abgerufen und von abgespielt werden MediaElement .These files can be retrieved from the library and played by the MediaElement.

Jede der Plattformen enthält eine Funktion, die es dem Benutzer ermöglicht, Medien aus der Bibliothek des Geräts auszuwählen.Each of the platforms includes a facility that allows the user to select media from the device's library. In Xamarin.Forms können Platt Form Projekte diese Funktion aufrufen und können von der-Klasse aufgerufen werden DependencyService .In Xamarin.Forms, platform projects can invoke this functionality, and it can be called by the DependencyService class.

Der in der Beispielanwendung verwendete Abhängigkeits Dienst für die Video Entnahme ähnelt sehr dem, das in Auswählen eines Fotos aus der Bildbibliothekdefiniert ist, mit dem Unterschied, dass die Auswahl einen Dateinamen anstelle eines-Objekts zurückgibt Stream .The video picking dependency service used in the sample application is very similar to one defined in Picking a Photo from the Picture Library, except that the picker returns a filename rather than a Stream object. Das freigegebene Code Projekt definiert eine Schnittstelle mit dem Namen IVideoPicker , die eine einzelne Methode mit dem Namen definiert GetVideoFileAsync .The shared code project defines an interface named IVideoPicker, that defines a single method named GetVideoFileAsync. Diese Schnittstelle wird von jeder Plattform in einer VideoPicker Klasse implementiert.Each platform then implements this interface in a VideoPicker class.

Im folgenden Codebeispiel wird gezeigt, wie eine Mediendatei aus der Geräte Bibliothek abgerufen wird:The following code example shows how to retrieve a media file from the device library:

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

Der Abhängigkeits Dienst für die Videoauswahl wird aufgerufen, indem die-Methode aufgerufen wird DependencyService.Get , um die Implementierung einer IVideoPicker Schnittstelle im Platt Form Projekt abzurufen.The video picking dependency service is invoked by calling the DependencyService.Get method to obtain the implementation of an IVideoPicker interface in the platform project. GetVideoFileAsyncAnschließend wird die-Methode für diese Instanz aufgerufen, und der zurückgegebene Dateiname wird verwendet, um ein FileMediaSource -Objekt zu erstellen und es auf die- Source Eigenschaft von festzulegen MediaElement .The GetVideoFileAsync method is then called on that instance, and the returned filename is used to create a FileMediaSource object and to set it to the Source property of the MediaElement.

Videoseiten Verhältnis ändernChange video aspect ratio

Die- Aspect Eigenschaft bestimmt, wie Video Medien so skaliert werden, dass Sie dem Anzeigebereich entsprechen.The Aspect property determines how video media will be scaled to fit the display area. Standardmäßig ist diese Eigenschaft auf den AspectFit Enumerationsmember festgelegt, kann jedoch auf einen beliebigen Enumerationsmember festgelegt werden Aspect :By default, this property is set to the AspectFit enumeration member, but it can be set to any of the Aspect enumeration members:

  • AspectFitGibt an, dass das Video bei Bedarf in den Anzeigebereich passt, wobei das Seitenverhältnis beibehalten wird.AspectFit indicates that the video will be letterboxed, if required, to fit into the display area, while preserving the aspect ratio.
  • AspectFillGibt an, dass das Video abgeschnitten wird, sodass der Anzeigebereich gefüllt wird, während das Seitenverhältnis beibehalten wird.AspectFill indicates that the video will be clipped so that it fills the display area, while preserving the aspect ratio.
  • FillGibt an, dass das Video gestreckt wird, um den Anzeigebereich auszufüllen.Fill indicates that the video will be stretched to fill the display area.

Abrufen von PositionsdatenPoll for Position data

Die Benachrichtigung über die Eigenschafts Änderung für die Position bindbare Eigenschaft wird nur in wichtigen Zeitpunkten ausgelöst, z. b. beim Starten und Beenden der Wiedergabe und beim AnhaltenThe property change notification for the Position bindable property only fires at key moments such as playback beginning and ending, and pause occurring. Aus diesem Grund ergibt die Datenbindung an die- Position Eigenschaft keine exakten Positionsdaten.Therefore, data binding to the Position property will not yield accurate position data. Stattdessen müssen Sie einen Timer einrichten und die-Eigenschaft Abfragen.Instead, you must setup a timer and poll the property.

Ein guter Ausgangspunkt hierfür ist die OnAppearing außer Kraft setzung der Seite, die die Positionsdaten erfordert, wenn Medien wiedergegeben werden:A good place to do this is in the OnAppearing override for the page that requires the position data as media is played:

bool polling = true;

protected override void OnAppearing()
{
    base.OnAppearing();

    Device.StartTimer(TimeSpan.FromMilliseconds(1000), () =>
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            positionLabel.Text = mediaElement.Position.ToString("hh\\:mm\\:ss");
        });
        return polling;
    });
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    polling = false;
}

In diesem Beispiel startet die OnAppearing außer Kraft Setzung einen Timer, der positionLabel jede Sekunde mit dem Wert aktualisiert wird Position .In this example, the OnAppearing override starts a timer that updates positionLabel with the Position value every second. Der Timer-Rückruf wird jede Sekunde aufgerufen, bis der Rückruf zurückgegeben wird false .The timer callback is invoked every second, until the callback returns false. Bei der Seitennavigation OnDisappearing wird die außer Kraft Setzung ausgeführt, die den Aufruf des timerrückrufs stoppt.When page navigation occurs the OnDisappearing override is executed, which stops the timer callback being invoked.

Grundlegendes zu MediaSource-TypenUnderstand MediaSource types

Eine MediaElement kann Medien wiedergeben, indem die Source zugehörige-Eigenschaft auf eine Remote-oder lokale Mediendatei festgelegt wirdA MediaElement can play media by setting its Source property to a remote or local media file. Die Source -Eigenschaft ist vom Typ MediaSource , und diese Klasse definiert zwei statische Methoden:The Source property is of type MediaSource, and this class defines two static methods:

Außerdem MediaSource verfügt die-Klasse auch über implizite Operatoren, die MediaSource Instanzen von string -und-Argumenten zurückgeben Uri .In addition, the MediaSource class also has implicit operators that return MediaSource instances from string and Uri arguments.

Hinweis

Wenn die- Source Eigenschaft in XAML festgelegt wird, wird ein Typkonverter aufgerufen, um eine- MediaSource Instanz aus einem oder zurückzugeben string Uri .When the Source property is set in XAML, a type converter is invoked to return a MediaSource instance from a string or Uri.

Die- MediaSource Klasse verfügt auch über zwei abgeleitete Klassen:The MediaSource class also has two derived classes:

  • UriMediaSource, die verwendet wird, um eine Remote Mediendatei aus einem URI anzugeben.UriMediaSource, which is used to specify a remote media file from a URI. Diese Klasse verfügt über eine- Uri Eigenschaft, die auf festgelegt werden kann Uri .This class has a Uri property that can be set to a Uri.
  • FileMediaSource, die verwendet wird, um eine lokale Mediendatei aus einer anzugeben string .FileMediaSource, which is used to specify a local media file from a string. Diese Klasse verfügt über eine- File Eigenschaft, die auf festgelegt werden kann string .This class has a File property that can be set to a string. Außerdem verfügt diese Klasse über implizite Operatoren zum Konvertieren eines string FileMediaSource -Objekts in ein-Objekt und ein- FileMediaSource Objekt in ein-Objekt string .In addition, this class has implicit operators to convert a string to a FileMediaSource object, and a FileMediaSource object to a string.

Hinweis

Wenn ein- FileMediaSource Objekt in XAML erstellt wird, wird ein Typkonverter aufgerufen, um eine- FileMediaSource Instanz aus einem zurückzugeben string .When a FileMediaSource object is created in XAML, a type converter is invoked to return a FileMediaSource instance from a string.

Ermitteln des Media Element-StatusDetermine MediaElement status

Die- MediaElement Klasse definiert eine schreibgeschützte bindbare Eigenschaft mit dem Namen CurrentState vom Typ MediaElementState .The MediaElement class defines a read-only bindable property named CurrentState, of type MediaElementState. Diese Eigenschaft gibt den aktuellen Status des Steuer Elements an, z. b. ob die Medien wiedergegeben oder angehalten werden oder ob die Medien noch nicht wiedergegeben werden können.This property indicates the current status of the control, such as whether the media is playing or paused, or if it's not yet ready to play the media.

Die- MediaElementState Enumeration definiert die folgenden Member:The MediaElementState enumeration defines the following members:

  • ClosedGibt an, dass MediaElement keine Medien enthält.Closed indicates that the MediaElement contains no media.
  • OpeningGibt an, dass der die MediaElement angegebene Quelle überprüft und versucht, die angegebene Quelle zu laden.Opening indicates that the MediaElement is validating and attempting to load the specified source.
  • BufferingGibt an, dass das MediaElement die Medien für die Wiedergabe lädt.Buffering indicates that the MediaElement is loading the media for playback. Die- Position Eigenschaft wird während dieses Zustands nicht Fortschritt.Its Position property does not advance during this state. Wenn das MediaElement Video abgespielt hat, zeigt es weiterhin den zuletzt angezeigten Frame an.If the MediaElement was playing video, it continues to display the last displayed frame.
  • PlayingGibt an, dass der MediaElement die Medienquelle wieder gibt.Playing indicates that the MediaElement is playing the media source.
  • PausedGibt an, dass die- MediaElement Eigenschaft nicht voranstellt Position .Paused indicates that the MediaElement does not advance its Position property. Wenn das MediaElement Video abgespielt hat, wird der aktuelle Frame weiterhin angezeigt.If the MediaElement was playing video, it continues to display the current frame.
  • StoppedGibt an, dass das MediaElement Medium enthält, aber nicht wiedergegeben oder angehalten wird.Stopped indicates that the MediaElement contains media but it is not being played or paused. Die Position -Eigenschaft ist 0 (null) und wird nicht fortfahren.Its Position property is 0 and does not advance. Wenn das geladene Medium ein Video ist, wird der MediaElement erste Frame angezeigt.If the loaded media is video, the MediaElement displays the first frame.

Es ist im Allgemeinen nicht notwendig, die-Eigenschaft zu überprüfen, CurrentState Wenn die Transport Steuerelemente verwendet werden MediaElement .It's generally not necessary to examine the CurrentState property when using the MediaElement transport controls. Diese Eigenschaft wird jedoch beim Implementieren ihrer eigenen Transport Steuerelemente wichtig.However, this property becomes important when implementing your own transport controls.

Implementieren von benutzerdefinierten Transport SteuerelementenImplement custom transport controls

Die Transport Steuerelemente eines Media Players enthalten die Schalt Flächen, diedie Funktionen abspielen, anhalten und Anhaltenausführen.The transport controls of a media player include the buttons that perform the functions Play, Pause, and Stop. 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.These buttons are generally identified with familiar icons rather than text, and the Play and Pause functions are generally combined into one button.

Standardmäßig sind die MediaElement Wiedergabe Steuerelemente deaktiviert.By default, the MediaElement playback controls are disabled. Dies ermöglicht es Ihnen, die Programm gesteuert zu steuern MediaElement oder eigene Transport Steuerelemente bereitzustellen.This enables you to control the MediaElement programmatically, or by supplying your own transport controls. Die Unterstützung hierfür MediaElement umfasst die Play Pause Methoden, und Stop .In support of this, MediaElement includes Play, Pause, and Stop methods.

Das folgende XAML-Beispiel zeigt eine Seite, die ein MediaElement und benutzerdefinierte Transport Steuerelemente enthält:The following XAML example shows a page that contains a MediaElement and custom transport controls:

<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 Transport Steuerelemente als- Button Objekte definiert.In this example, the custom transport controls are defined as Button objects. Es gibt jedoch nur zwei- Button Objekte, wobei die erste Button wieder Gabe und Pausedarstellt und die zweite den Vorgang zum Button Anhaltendarstellt.However, there are only two Button objects, with the first Button representing Play and Pause, and the second Button representing Stop. DataTrigger-Objekte werden verwendet, um die Schaltflächen zu aktivieren und zu deaktivieren und um die erste Schaltfläche zwischen wieder Gabe und Pausezu wechseln.DataTrigger objects are used to enable and disable the buttons, and to switch the first button between Play and Pause. Weitere Informationen zu Daten Triggern finden Sie unter Xamarin.Forms Trigger.For more information about data triggers, see Xamarin.Forms Triggers.

Die Code-Behind-Datei enthält die Handler für die- Clicked Ereignisse:The code-behind file has the handlers for the Clicked events:

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 Wiedergabe Schaltfläche kann gedrückt werden, sobald Sie aktiviert wird, um die Wiedergabe zu starten:The Play button can be pressed, once it becomes enabled, to begin playback:

Screenshot eines Media Element mit benutzerdefinierten Transport Steuerelementen unter IOS und AndroidScreenshot of a MediaElement with custom transport controls, on iOS and Android

Wenn Sie die Schaltfläche Anhalten drücken, wird die Wiedergabe angehalten:Pressing the Pause button results in playback pausing:

Screenshot eines Media Element-Elements mit angehaltenen Wiedergabe unter IOS und AndroidScreenshot of a MediaElement with playback paused, on iOS and Android

Durch Drücken der Schaltfläche Beenden wird die Wiedergabe beendet und die Position der Mediendatei an den Anfang zurückgegeben.Pressing the Stop button stops playback and returns the position of the media file to the beginning.

Implementieren einer benutzerdefinierten Positions LeisteImplement a custom position bar

Die von jeder Plattform implementierten Transportsteuerelemente umfassen auch eine Fortschrittsleiste.The transport controls implemented by each platform include a position bar. Diese Leiste ähnelt einem Schieberegler und zeigt den aktuellen Speicherort der Medien innerhalb der gesamten Dauer an.This bar resembles a slider and shows the current location of the media within its total duration. Außerdem können Sie die Positions Leiste so bearbeiten, dass Sie an eine neue Position im Video vorwärts oder rückwärts verschoben wird.In addition, you can manipulate the position bar to move forwards or backwards to a new position in the video.

Zum Implementieren einer benutzerdefinierten Positions Leiste müssen Sie die Dauer der Medien und die aktuelle Wiedergabe Position kennen.Implementing a custom position bar requires knowing the duration of the media, and the current playback position. Diese Daten sind in der-Eigenschaft und der-Eigenschaft verfügbar Duration Position .This data is available in the Duration and Position properties.

Wichtig

PositionMuss abgepolgt werden, um genaue Positionsdaten zu erhalten.The Position must be polled to obtain accurate position data. Weitere Informationen finden Sie unter Abrufen von Positionsdaten.For more information, see Poll for Position data.

Eine benutzerdefinierte Positions Leiste kann mit einem implementiert werden Slider , wie im folgenden Beispiel gezeigt:A custom position bar can be implemented using a Slider, as shown in the following example:

public class PositionSlider : Slider
{
    public static readonly BindableProperty DurationProperty =
        BindableProperty.Create(nameof(Duration), typeof(TimeSpan), typeof(PositionSlider), new TimeSpan(1),
                                propertyChanged: (bindable, oldValue, newValue) =>
                                {
                                    ((PositionSlider)bindable).SetTimeToEnd();
                                    double seconds = ((TimeSpan)newValue).TotalSeconds;
                                    ((Slider)bindable).Maximum = seconds <= 0 ? 1 : seconds;
                                });

    public TimeSpan Duration
    {
        get { return (TimeSpan)GetValue(DurationProperty); }
        set { SetValue(DurationProperty, value); }
    }

    public static readonly BindableProperty PositionProperty =
        BindableProperty.Create(nameof(Position), typeof(TimeSpan), typeof(PositionSlider), new TimeSpan(0),
                                propertyChanged: (bindable, oldValue, newValue) => ((PositionSlider)bindable).SetTimeToEnd());

    public TimeSpan Position
    {
        get { return (TimeSpan)GetValue(PositionProperty); }
        set { SetValue(PositionProperty, value); }
    }

    static readonly BindablePropertyKey TimeToEndPropertyKey =
        BindableProperty.CreateReadOnly(nameof(TimeToEnd), typeof(TimeSpan), typeof(PositionSlider), new TimeSpan());

    public static readonly BindableProperty TimeToEndProperty = TimeToEndPropertyKey.BindableProperty;

    public TimeSpan TimeToEnd
    {
        get { return (TimeSpan)GetValue(TimeToEndProperty); }
        private set { SetValue(TimeToEndPropertyKey, value); }
    }

    public PositionSlider()
    {
        PropertyChanged += (sender, args) =>
        {
            if (args.PropertyName == "Value")
            {
                TimeSpan newPosition = TimeSpan.FromSeconds(Value);
                if (Math.Abs(newPosition.TotalSeconds - Position.TotalSeconds) / Duration.TotalSeconds > 0.01)
                {
                    Position = newPosition;
                }
            }
        };
    }

    void SetTimeToEnd()
    {
        TimeToEnd = Duration - Position;
    }
}

Die PositionSlider Klasse definiert ihre eigenen Duration und Position bindbaren Eigenschaften und eine TimeToEnd bindbare Eigenschaft.The PositionSlider class defines its own Duration and Position bindable properties, and a TimeToEnd bindable property. Alle drei Eigenschaften sind vom Typ TimeSpan .All three properties are of type TimeSpan. Der von der Eigenschaft geänderte Handler für die- Duration Eigenschaft legt die- Maximum Eigenschaft des-Objekts Slider auf die- TotalSeconds Eigenschaft des- TimeSpan Werts fest.The property-changed handler for the Duration property sets the Maximum property of the Slider to the TotalSeconds property of the TimeSpan value. Die TimeToEnd -Eigenschaft wird auf der Grundlage von Änderungen an den Duration Eigenschaften und berechnet Position und beginnt bei der Dauer des Mediums und sinkt bei der Wiedergabe auf den Wert 0 (null).The TimeToEnd property is calculated based on changes to the Duration and Position properties, and begins at the media's duration and decreases down to zero as playback proceeds.

PositionSliderWird von der zugrunde liegenden aktualisiert Slider , wenn Slider verschoben wird, um anzugeben, dass die Medien an einer neuen Position erweitert oder umgekehrt werden sollen.The PositionSlider is updated from the underlying Slider when the Slider is moved to indicate that the media should be advanced or reversed to a new position. Dies wird im- PropertyChanged Handler im- PositionSlider Konstruktor erkannt.This is detected in the PropertyChanged handler in the PositionSlider constructor. Der Handler prüft nach Änderungen an der Value-Eigenschaft. Wenn sie sich von der Position-Eigenschaft unterscheidet, wird die Position-Eigenschaft über die Value-Eigenschaft festgelegt.The handler checks for a change in the Value property, and if it's different from the Position property, then the Position property is set from the Value property. Weitere Informationen zur Verwendung von " Slider Siehe", Xamarin.Forms SchiebereglerFor more information about using a Slider see, Xamarin.Forms Slider

Hinweis

Unter Android Slider verfügt nur über 1000 diskrete Schritte, unabhängig von der Minimum -Einstellung und der- Maximum Einstellung.On Android, the Slider only has 1000 discrete steps, regardless of the Minimum and Maximum settings. Wenn die Medien Länge größer als 1000 Sekunden ist, entsprechen zwei unterschiedliche Position Werte dem gleichen Value des Slider .If the media length is greater than 1000 seconds, then two different Position values would correspond to the same Value of the Slider. Aus diesem Grund prüft der obige Code, ob die neue Position und die vorhandene Position größer als ein Hundertstel der Gesamtdauer sind.This is why the code above checks that the new position and existing position are greater than one-hundredth of the overall duration.

Das folgende Beispiel zeigt PositionSlider , wie auf einer Seite verwendet wird:The following example shows the PositionSlider being consumed on a page:

<controls:PositionSlider x:Name="positionSlider"
                         BindingContext="{x:Reference mediaElement}"
                         Duration="{Binding Duration}"
                         ValueChanged="OnPositionSliderValueChanged">
    <controls:PositionSlider.Triggers>
        <DataTrigger TargetType="controls:PositionSlider"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static MediaElementState.Buffering}">
            <Setter Property="IsEnabled" Value="False" />
        </DataTrigger>
    </controls:PositionSlider.Triggers>
</controls:PositionSlider>

In diesem Beispiel ist die Duration -Eigenschaft des PositionSlider Daten gebundenen an die- Duration Eigenschaft des-Objekts MediaElement .In this example, the Duration property of the PositionSlider is data-bound to the Duration property of the MediaElement. Wenn Value sich die-Eigenschaft der Slider ändert, ValueChanged wird das-Ereignis ausgelöst, und der- OnPositionSliderValueChanged Handler wird ausgeführt.When the Value property of the Slider changes, the ValueChanged event fires and the OnPositionSliderValueChanged handler is executed. Mit diesem Handler wird die- MediaElement.Position Eigenschaft auf den Wert der-Eigenschaft festgelegt PositionSlider.Position .This handler sets the MediaElement.Position property to the value of the PositionSlider.Position property. Daher wird das Ziehen der Slider Ergebnisse in die Position der Medienwiedergabe geändert:Therefore, dragging the Slider results in the media playback position changing:

Screenshot eines Media Element mit einer benutzerdefinierten Positions Leiste unter IOS und AndroidScreenshot of a MediaElement with a custom position bar, on iOS and Android

Außerdem wird ein- DataTrigger Objekt verwendet, um den zu deaktivieren, PositionSlider Wenn die Medien gepuffert werden.In addition, a DataTrigger object is used to disable the PositionSlider when the media is buffering. Weitere Informationen zu Daten Triggern finden Sie unter Xamarin.Forms Trigger.For more information about data triggers, see Xamarin.Forms Triggers.

Implementieren eines benutzerdefinierten volumesteuerelementsImplement a custom volume control

Die von jeder Plattform implementierten Steuerelemente zur Medienwiedergabe enthalten eine volumeleiste.Media playback controls implemented by each platform include a volume bar. Diese Leiste ähnelt einem Schieberegler und zeigt das Volume der Medien an.This bar resembles a slider and shows the volume of the media. Außerdem können Sie die volumeleiste bearbeiten, um das Volume zu vergrößern oder zu verkleinern.In addition, you can manipulate the volume bar to increase or decrease the volume.

Eine benutzerdefinierte volumeleiste kann mit einem implementiert werden Slider , wie im folgenden Beispiel gezeigt:A custom volume bar can be implemented using a Slider, as shown in the following example:

<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 bindet die Slider Daten die- Value Eigenschaft an die- Volume Eigenschaft von MediaElement .In this example, the Slider data binds its Value property to the Volume property of the MediaElement. Dies ist möglich, da die- Volume Eigenschaft eine- TwoWay Bindung verwendet.This is possible because the Volume property uses a TwoWay binding. Daher wird durch Ändern der- Value Eigenschaft die- Volume Eigenschaft geändert.Therefore, changing the Value property will result in the Volume property changing.

Hinweis

Die- Volume Eigenschaft verfügt über einen vlidation-Rückruf, mit dem sichergestellt wird, dass der Wert größer oder gleich 0,0 und kleiner oder gleich 1,0 ist.The Volume property has a vlidation callback that ensures that its value is greater than or equal to 0.0, and less than or equal to 1.0.

Weitere Informationen zur Verwendung von " Slider Siehe", Xamarin.Forms SchiebereglerFor more information about using a Slider see, Xamarin.Forms Slider