Bagikan melalui


MediaElement

MediaElement adalah kontrol untuk memutar video dan audio. Media yang didukung oleh platform yang mendasar dapat dimainkan dari sumber berikut:

  • Web, menggunakan URI (HTTP atau HTTPS).
  • Sumber daya yang disematkan dalam aplikasi platform, menggunakan embed:// skema URI.
  • File yang berasal dari sistem file lokal aplikasi, menggunakan filesystem:// skema URI.

MediaElement dapat menggunakan kontrol pemutaran platform, yang disebut sebagai kontrol transportasi. Namun, mereka dinonaktifkan secara default dan dapat diganti dengan kontrol transportasi Anda sendiri. Cuplikan layar berikut menunjukkan MediaElement pemutaran video dengan kontrol transportasi platform:

Cuplikan layar MediaElement yang memutar video, di Android dan iOS.

Catatan

MediaElement tersedia di iOS, Android, Windows, macOS, dan Tizen.

menggunakan MediaElement implementasi platform berikut.

Platform Implementasi pemutar media platform
Android ExoPlayer, terima kasih banyak untuk exoPlayerXamarin maintainers!
iOS/macOS AVPlayer
Windows MediaPlayer

Memulai

Untuk menggunakan MediaElement fitur Toolkit Komunitas MAUI .NET, langkah-langkah berikut diperlukan.

Install paket Nuget

Sebelum dapat digunakan MediaElement di dalam aplikasi, Anda harus menginstal CommunityToolkit.Maui.MediaElement paket NuGet dan menambahkan baris inisialisasi di MauiProgram.cs Anda. Sebagai berikut:

Nama paket: CommunityToolkit.Maui.MediaElement

Url paket: https://www.nuget.org/packages/CommunityToolkit.Maui.MediaElement

Menginisialisasi paket

Pertama, pernyataan penggunaan perlu ditambahkan ke bagian atas file MauiProgram.cs Anda

using CommunityToolkit.Maui.MediaElement;

Untuk menggunakan metode dengan MediaElement benar UseMauiCommunityToolkitMediaElement harus dipanggil pada MauiAppBuilder kelas saat bootstrapping aplikasi file MauiProgram.cs . Contoh berikut menunjukkan cara melakukan ini.

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

Untuk informasi selengkapnya tentang cara melakukannya, silakan merujuk ke halaman Memulai .

Inisialisasi khusus platform

Untuk mengakses MediaElement fungsionalitas, diperlukan penyiapan khusus platform berikut.

Saat menggunakannya MediaElement , penting untuk melakukan langkah-langkah berikut:

1. Tambahkan ResizableActivity dan Launchmode ke Aktivitas

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

2. Tambahkan yang berikut ini ke AndroidManifest.xml dalam <application> tag.

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

3. Tambahkan izin berikut ke AndroidManifest.xml

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

Berikut adalah contoh pengaturan yang diperlukan di AndroidManifest.xml

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

Catatan

Modifikasi pada manifes Android ini memungkinkan tampilan metadata saat memutar video. Ini menyediakan dukungan untuk pemberitahuan dan sangat penting agar pemberitahuan berfungsi di semua API yang relevan. Perubahan ini memperkenalkan layanan dan memberikan izin yang diperlukan.

Untuk contoh lengkap metode ini yang disertakan dalam aplikasi, silakan lihat Aplikasi Sampel Toolkit Komunitas .NET MAUI

Format yang Didukung

Format multimedia yang didukung dapat berbeda per platform. Dalam beberapa kasus bahkan dapat bergantung pada dekode apa yang tersedia atau diinstal pada sistem operasi yang digunakan saat menjalankan aplikasi Anda. Untuk informasi lebih rinci tentang format mana yang didukung di setiap platform, silakan lihat tautan di bawah ini.

Platform Tautan Catatan
Android Format yang Didukung ExoPlayer
iOS/macOS Format yang Didukung iOS/macOS Tidak ada dokumentasi resmi tentang hal ini
Windows Format yang Didukung Windows Pada Windows, format yang didukung sangat bergantung pada codec apa yang diinstal pada komputer pengguna
Tizen Format yang Didukung Tizen

Penting

Jika pengguna menggunakan edisi Windows N, tidak ada pemutaran video yang didukung secara default. Edisi Windows N tidak memiliki format pemutaran video yang diinstal oleh desain.

Skenario umum

Bagian berikut mencakup skenario penggunaan umum untuk MediaElement.

Memutar media jarak jauh

Dapat MediaElement memutar file media jarak jauh menggunakan skema HTTP dan HTTPS URI. Ini dicapai dengan mengatur Source properti ke URI file media:

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

Penting

Saat memutar sumber jarak jauh dari titik akhir HTTP, Anda mungkin perlu menonaktifkan langkah-langkah keamanan sistem operasi yang mencegah akses ke titik akhir web yang tidak aman. Ini berlaku untuk setidaknya iOS dan Android.

Secara default, media yang ditentukan oleh Source properti tidak segera mulai diputar setelah media dibuka. Untuk mengaktifkan pemutaran media otomatis, atur properti ke ShouldAutoPlay true.

Kontrol pemutaran media yang disediakan platform diaktifkan secara default, dan dapat dinonaktifkan dengan mengatur ShouldShowPlaybackControls properti ke false.

Menggunakan Metadata

Dapat MediaElement menggunakan metadata untuk MediaElement.MetadataTitle, MediaElement.MetadataArtist dan MediaElement.MetadataArtworkUrl. Anda dapat mengatur judul atau artis untuk menunjukkan apa yang saat ini diputar di kontrol layar kunci untuk Windows, Mac Catalyst, iOS, dan Android. Anda dapat mengatur URL lokal atau jarak jauh dengan karya seni untuk layar kunci. Setidaknya harus 1080P agar kualitas terbaik ditampilkan. Ini harus berupa URL dan berupa .jpg atau .png

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

Penting

Anda dapat mengatur metadata di XAML atau kode di belakang. Jika Anda mengaturnya dalam kode di belakang, Anda perlu mengatur sumber dalam kode di belakang. Sumber harus diatur terakhir. Jika Anda mengatur metadata di XAML atau di konstruktor, catatan ini dapat diabaikan dengan aman.

Memutar media lokal

Media lokal dapat diputar dari sumber berikut:

  • Sumber daya yang disematkan dalam aplikasi platform, menggunakan embed:// skema URI.
  • File yang berasal dari sistem file lokal aplikasi, menggunakan filesystem:// skema URI.

Catatan

Singkatan embed:// dan filesystem:// hanya bekerja dari XAML. Dalam kode, silakan gunakan MediaSource.FromResource() dan MediaSource.FromFile() masing-masing. Dengan menggunakan metode ini, Anda dapat menghilangkan awalan embed:// dan filesystem:// . Sisa jalur harus sama.

Memutar media yang disematkan dalam paket aplikasi

Dapat MediaElement memutar file media yang disematkan dalam paket aplikasi, menggunakan embed:// skema URI. File media disematkan dalam paket aplikasi dengan menempatkannya dalam proyek platform.

Untuk mengaktifkan file media untuk pemutaran dari sumber daya lokal, tambahkan file ke Resources/Raw folder proyek .NET MAUI Anda. Ketika file ditambahkan di root, URI akan menjadi embed://MyFile.mp4.

Anda juga dapat menempatkan file di sub folder. Jika MyFile.mp4 berada di Resources/Raw/MyVideos maka URI untuk menggunakannya MediaElement adalah embed://MyVideos/MyFile.mp4.

Contoh cara menggunakan sintaks ini di XAML dapat dilihat di bawah ini.

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

Memahami jenis MediaSource

Dapat MediaElement memutar media dengan menyetel propertinya Source ke file media jarak jauh atau lokal. Properti Source berjenis MediaSource, dan kelas ini mendefinisikan tiga metode statis:

  • FromFile, mengembalikan instans FileMediaSource dari string argumen.
  • FromUri, mengembalikan instans UriMediaSource dari Uri argumen.
  • FromResource, mengembalikan instans ResourceMediaSource dari string argumen.

Selain itu, kelas ini MediaSource juga memiliki operator implisit yang mengembalikan MediaSource instans dari string argumen dan Uri .

Catatan

Source Saat properti diatur dalam XAML, pengonversi jenis dipanggil untuk mengembalikan MediaSource instans dari string atau Uri.

Kelas ini MediaSource juga memiliki kelas turunan ini:

  • FileMediaSource, yang digunakan untuk menentukan file media lokal dari string. Kelas ini memiliki Path properti yang dapat diatur ke string. Selain itu, kelas ini memiliki operator implisit untuk mengonversi ke string FileMediaSource objek, dan FileMediaSource objek ke string.
  • UriMediaSource, yang digunakan untuk menentukan file media jarak jauh dari URI. Kelas ini memiliki Uri properti yang dapat diatur ke Uri.
  • ResourceMediaSource, yang digunakan untuk menentukan file tersemat yang disediakan melalui file sumber daya aplikasi. Kelas ini memiliki Path properti yang dapat diatur ke string.

Catatan

FileMediaSource Saat objek dibuat di XAML, pengonversi jenis dipanggil untuk mengembalikan FileMediaSource instans dari string.

Mengubah rasio aspek video

Properti Aspect menentukan bagaimana media video akan diskalakan agar sesuai dengan area tampilan. Secara default, properti ini diatur ke AspectFit anggota enumerasi, tetapi dapat diatur ke salah Aspect satu anggota enumerasi:

  • AspectFit menunjukkan bahwa video akan diberi kotak surat, jika diperlukan, agar pas dengan area tampilan, sambil mempertahankan rasio aspek.
  • AspectFill menunjukkan bahwa video akan diklip sehingga mengisi area tampilan, sambil mempertahankan rasio aspek.
  • Fill menunjukkan bahwa video akan direntangkan untuk mengisi area tampilan.

Tentukan MediaElement status

Kelas MediaElement mendefinisikan properti yang dapat diikat baca-saja bernama CurrentState, dari jenis MediaElementState. Properti ini menunjukkan status kontrol saat ini, seperti apakah media sedang diputar atau dijeda, atau jika belum siap untuk memutar media.

Enumerasi MediaElementState menentukan anggota berikut:

  • None menunjukkan bahwa MediaElement tidak berisi media.
  • Opening menunjukkan bahwa MediaElement sedang memvalidasi dan mencoba memuat sumber yang ditentukan.
  • Buffering menunjukkan bahwa MediaElement sedang memuat media untuk pemutaran. Propertinya Position tidak maju selama status ini. MediaElement Jika sedang memutar video, video akan terus menampilkan bingkai terakhir yang ditampilkan.
  • Playing menunjukkan bahwa MediaElement sedang memutar sumber media.
  • Paused menunjukkan bahwa tidak memajukan MediaElement propertinya Position . MediaElement Jika sedang memutar video, maka akan terus menampilkan bingkai saat ini.
  • Stopped menunjukkan bahwa MediaElement berisi media tetapi tidak sedang diputar atau dijeda. Propertinya Position diatur ulang ke 0 dan tidak maju.
  • Failed menunjukkan bahwa MediaElement gagal memuat atau memutar media. Ini dapat terjadi saat mencoba memuat item media baru, ketika mencoba memutar item media atau ketika pemutaran media terganggu karena kegagalan. MediaFailed Gunakan peristiwa untuk mengambil detail tambahan.

Umumnya tidak perlu memeriksa CurrentState properti saat menggunakan MediaElement kontrol transportasi. Namun, properti ini menjadi penting saat menerapkan kontrol transportasi Anda sendiri.

Menerapkan kontrol transportasi kustom

Kontrol transportasi pemutar media mencakup tombol yang melakukan fungsi Putar, Jeda, dan Berhenti. Tombol-tombol ini umumnya diidentifikasi dengan ikon yang sudah dikenal daripada teks, dan fungsi Putar dan Jeda umumnya digabungkan menjadi satu tombol.

Secara default, MediaElement kontrol pemutaran dinonaktifkan. Ini memungkinkan Anda mengontrol MediaElement secara terprogram, atau dengan menyediakan kontrol transportasi Anda sendiri. Untuk mendukung hal ini, MediaElement termasuk Playmetode , Pause, dan Stop .

Contoh XAML berikut menunjukkan halaman yang berisi MediaElement kontrol transportasi kustom dan :

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

Dalam contoh ini, kontrol transportasi kustom didefinisikan sebagai Button objek. Namun, hanya ada dua Button objek, dengan yang pertama Button mewakili Putar dan Jeda, dan yang kedua Button mewakili Stop. DataTrigger objek digunakan untuk mengaktifkan dan menonaktifkan tombol, dan untuk mengalihkan tombol pertama antara Putar dan Jeda. Untuk informasi selengkapnya tentang pemicu data, lihat Pemicu MAUI .NET.

File code-behind memiliki handler untuk Clicked peristiwa:

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

Tombol Putar dapat ditekan, setelah diaktifkan, untuk memulai pemutaran. Menekan tombol Jeda menghasilkan jeda pemutaran. Menekan tombol Hentikan menghentikan pemutaran dan mengembalikan posisi file media ke awal.

Menerapkan kontrol volume kustom

Kontrol pemutaran media yang diterapkan oleh setiap platform mencakup bilah volume. Bilah ini menyerupan penggeledah dan memperlihatkan volume media. Selain itu, Anda dapat memanipulasi bilah volume untuk menambah atau mengurangi volume.

Bilah volume kustom dapat diimplementasikan menggunakan , seperti yang Sliderditunjukkan dalam contoh berikut:

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

Dalam contoh ini, Slider data mengikat propertinya Value ke Volume properti .MediaElement Ini dimungkinkan Volume karena properti menggunakan pengikatan TwoWay . Oleh karena itu, mengubah Value properti akan mengakibatkan Volume properti berubah.

Catatan

Properti Volume memiliki panggilan balik validasi yang memastikan bahwa nilainya lebih besar dari atau sama dengan 0,0, dan kurang dari atau sama dengan 1,0.

Untuk informasi selengkapnya tentang menggunakan lihat Slider , Slider .NET MAUI

MediaElement Membersihkan sumber daya

Untuk mencegah kebocoran memori, Anda harus membebaskan sumber daya .MediaElement Ini dapat dilakukan dengan memutus sambungan handler. Di mana Anda perlu melakukan ini tergantung pada di mana dan bagaimana Anda menggunakan MediaElement di aplikasi Anda, tetapi biasanya jika Anda memiliki MediaElement pada satu halaman dan tidak memutar media di latar belakang, Anda ingin membebaskan sumber daya saat pengguna menavigasi jauh dari halaman.

Di bawah ini Anda dapat menemukan cuplikan kode sampel yang menunjukkan cara melakukan ini. Pertama, pastikan untuk menghubungkan Unloaded peristiwa di halaman Anda.

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

Kemudian di code-behind, panggil metode untuk memutuskan sambungan handler.

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

Untuk membaca lebih lanjut tentang handler, silakan lihat dokumentasi .NET MAUI tentang Handler.

Properti

Properti Tipe Deskripsi Nilai Default
Aspek Aspek Menentukan mode penskalaan untuk media (visual) yang saat ini dimuat. Ini adalah properti yang dapat diikat. Aspect.AspectFit
CurrentState MediaElementState Menunjukkan status kontrol saat ini. Ini adalah properti baca-saja yang dapat diikat. MediaElementState.None
Durasi TimeSpan Menunjukkan durasi media yang saat ini dibuka. Ini adalah properti baca-saja yang dapat diikat. TimeSpan.Zero
Position TimeSpan Menjelaskan kemajuan saat ini melalui waktu pemutaran media. Ini adalah properti baca-saja yang dapat diikat. Jika Anda ingin mengatur Position gunakan SeekTo() metode . TimeSpan.Zero
ShouldAutoPlay bool Menunjukkan apakah pemutaran media akan dimulai secara otomatis ketika Source properti diatur. Ini adalah properti yang dapat diikat. false
ShouldLoopPlayback bool Menjelaskan apakah sumber media yang saat ini dimuat harus melanjutkan pemutaran dari awal setelah mencapai akhir. Ini adalah properti yang dapat diikat. false
ShouldKeepScreenOn bool Menentukan apakah layar perangkat harus tetap menyala selama pemutaran media. Ini adalah properti yang dapat diikat. false
HarusMute bool Menentukan apakah audio saat ini dibisukan. Ini adalah properti yang dapat diikat. false
ShouldShowPlaybackControls bool Menentukan apakah kontrol pemutaran platform ditampilkan. Ini adalah properti yang dapat diikat. Perhatikan bahwa pada iOS dan Windows kontrol hanya ditampilkan untuk jangka waktu singkat setelah berinteraksi dengan layar. Tidak ada cara untuk menjaga kontrol tetap terlihat setiap saat. true
Sumber MediaSource? Sumber media yang dimuat ke dalam kontrol. null
Kecepatan double Menentukan kecepatan pemutaran media. Ini adalah properti yang dapat diikat 1
MediaHeight int Tinggi media yang dimuat dalam piksel. Ini adalah properti baca-saja yang dapat diikat. Tidak dilaporkan untuk media non-visual dan mungkin tidak selalu diisi di iOS/macOS untuk konten yang di-streaming langsung. 0
MediaWidth int Lebar media yang dimuat dalam piksel. Ini adalah properti baca-saja yang dapat diikat. Tidak dilaporkan untuk media non-visual dan mungkin tidak selalu diisi di iOS/macOS untuk konten yang di-streaming langsung. 0
Volume double Menentukan volume media, yang diwakili pada skala linier antara 0 dan 1. Ini adalah properti yang dapat diikat. 1

Acara

Kejadian Deskripsi
MediaBuka Terjadi ketika aliran media telah divalidasi dan dibuka.
MediaEnded Terjadi ketika selesai MediaElement memutar medianya.
MediaFailed Terjadi ketika ada kesalahan yang terkait dengan sumber media.
PositionChanged Terjadi ketika Position nilai properti telah berubah.
SeekCompleted Terjadi ketika titik pencarian operasi pencarian yang diminta siap untuk pemutaran.

Metode

Kejadian Deskripsi
Putar Mulai memutar media yang dimuat.
Jeda Menjeda pemutaran media saat ini.
Stop Menghentikan pemutaran dan mengatur ulang posisi media saat ini.
SeekTo TimeSpan Mengambil nilai untuk mengatur properti ke Position dan mengambil CancellationToken untuk membatalkan Task.

Contoh

Anda dapat menemukan contoh kontrol ini dalam tindakan di Aplikasi Sampel Toolkit Komunitas .NET MAUI.

API

Anda dapat menemukan kode sumber untuk MediaElement lebih pada repositori GitHub .NET MAUI Community Toolkit.