Medya oynatıcıları

Medya oynatma, video ve sesin sayfa içine gömülü şekilde (başka bir kontrol grubuyla eklenmiş olarak) veya ayrılmış tam ekran deneyimleri aracılığıyla görüntüleme ve dinlemeyi içerir.

Kullanıcılar, gerektiğinde değiştirebileceğiniz yürütme/duraklatma, geri atlama, ileri atlama gibi temel bir denetim kümesi bekler (media player düğmeleri, denetim çubuğunun arka planı ve denetim düzenlemesi veya düzeni dahil).

Doğru kontrol bu mu?

Uygulamanızda ses veya video oynatmak istediğinizde bir media player kullanın. Bir resim koleksiyonunu görüntülemek için bir flip viewkullanın.

Recommendations

media player hem açık hem de koyu temaları destekler, ancak koyu tema çoğu eğlence senaryosu için daha iyi bir deneyim sağlar. Koyu arka plan, özellikle düşük ışıklı koşullar için daha iyi karşıtlık sağlar ve denetim çubuğunun görüntüleme deneyimini engellemesini sınırlar.

Video içeriğini yürütürken, satır içi modun üzerinde tam ekran modunu tanıtarak özel bir görüntüleme deneyimini teşvik edin. Tam ekran görüntüleme deneyimi en uygun seçenektir ve seçenekler satır içi modda kısıtlanır.

Ekran alanınız varsa, çift satır düzenini tercih edin. Denetimler için kompakt tek satırlı düzene göre daha fazla alan sağlar ve çeşitli girişleri kullanarak gezinmek daha kolay olabilir.

Varsayılan denetimler medya oynatma için iyileştirilmiştir, ancak medya oynatıcıya, uygulamanız için en iyi deneyimi sağlamak amacıyla ihtiyacınız olan özel seçenekleri ekleyebilirsiniz. Özel aktarım denetimleri oluşturma ziyaret ederek özel denetimler ekleme hakkında daha fazla bilgi edinin.

media player oluşturma

• Önemli API'ler: MediaPlayerElement sınıfı, MediaTransportControls sınıfı

WinUI 3 Galeri uygulamasını açın ve MediaPlayerElement'i çalışır durumda görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

XAML'de bir MediaPlayerElement nesnesi oluşturarak uygulamanıza medya ekleyin ve Kaynak'ı bir ses veya video dosyasına işaret eden bir MediaSource olarak ayarlayın.

Bu XAML bir MediaPlayerElement oluşturur ve Source özelliğini uygulamada yerel olan bir video dosyasının URI'sine ayarlar. Sayfa yüklendiğinde MediaPlayerElement oynatılmaya başlar. Medyanın hemen başlatılmasını engellemek için Otomatik Kullan özelliğini olarak falseayarlayabilirsiniz.

<MediaPlayerElement x:Name="mediaPlayerElement"
                    Source="ms-appx:///Videos/video1.mp4"
                    Width="400" AutoPlay="True"/>

Bu XAML, yerleşik aktarım denetimleri etkin ve AutoPlay özelliği olarak ayarlanmış bir MediaPlayerElement oluştururfalse.

<MediaPlayerElement x:Name="mediaPlayerElement"
                    Source="ms-appx:///Videos/video1.mp4"
                    Width="400"
                    AutoPlay="False"
                    AreTransportControlsEnabled="True"/>

Önemli

MediaPlayerElement.Source göreli URI'ye (ms-appx/ms-resource) ayarlanması yalnızca Windows Uygulama Paketleme Projesi ile paketlenmiş bir uygulamada çalışır. Uygulamanız Windows Uygulama Paketleme Projesi kullanmıyorsa, önerilen geçici çözüm göreli ms-appx:/// URI'sini tamamen çözümlenmiş bir file:/// URI'sine dönüştürmektir. Ayrıca, bu makalenin devamında yer alan Medya kaynağını ayarlama ve Yerel medya dosyalarını açma bölümlerine bakın.

Medya taşıma denetimleri

MediaPlayerElement yürütme, durdurma, duraklatma, ses düzeyi, sesi kapatma, arama/ilerleme, altyazılar ve ses parçası seçimini işleyen yerleşik taşıma kontrolleri içerir. Bu denetimleri etkinleştirmek için AreTransportControlsEnabled değerini olarak trueayarlayın. Bunları devre dışı bırakmak için AreTransportControlsEnabled öğesini false olarak ayarlayın. Aktarım denetimleri MediaTransportControls sınıfı tarafından temsil edilir. as-isaktarım denetimlerini kullanabilir veya bunları çeşitli yollarla özelleştirebilirsiniz. Daha fazla bilgi için MediaTransportControls sınıf referansına ve Özel aktarım denetimleri oluşturmabakın.

Aktarım denetimleri tek ve çift satırlı düzenleri destekler. Buradaki ilk örnek, medya zaman çizelgesinin solunda oynat/duraklat düğmesi bulunan tek satırlı bir düzendir. Bu düzen en iyi şekilde medya oynatma ve kompakt ekranlar için kullanılır.

Özellikle büyük ekranlarda çoğu kullanım senaryosu için çift satırlı denetim düzeni (aşağıda) önerilir. Bu düzen denetimler için daha fazla alan sağlar ve zaman çizelgesini kullanıcının çalışması için kolaylaştırır.

Sistem medya aktarım kontrolleri

MediaPlayerElement , sistem medya taşıma denetimleriyle otomatik olarak tümleştirilir. Sistem medya taşıma denetimleri, klavyelerdeki medya düğmeleri gibi donanım medya tuşlarına basıldığında açılan denetimlerdir. Daha fazla bilgi için bkz. SystemMediaTransportControls.

Medya kaynağını ayarlama

Ağdaki dosyaları veya uygulamayla eklenmiş dosyaları yürütmek için Source özelliğini dosyanın yolunu içeren bir MediaSource olarak ayarlayın.

İpucu

dosyaları İnternet'ten açmak için, uygulamanızın bildiriminde (Package.appxmanifest ) İnternet (İstemci) özelliğini bildirmeniz gerekir. Özellikleri bildirme hakkında daha fazla bilgi için bkz. Uygulama özelliği bildirimleri.

Bu kod, XAML'de tanımlanan MediaPlayerElement'inSource özelliğini TextBox'a girilen dosyanın yoluna ayarlamaya çalışır.

<TextBox x:Name="txtFilePath" Width="400"
         FontSize="20"
         KeyUp="TxtFilePath_KeyUp"
         Header="File path"
         PlaceholderText="Enter file path"/>

private void TxtFilePath_KeyUp(object sender, KeyRoutedEventArgs e)
{
    if (e.Key == Windows.System.VirtualKey.Enter)
    {
        TextBox tbPath = sender as TextBox;

        if (tbPath != null)
        {
            LoadMediaFromString(tbPath.Text);
        }
    }
}

private void LoadMediaFromString(string path)
{
    try
    {
        Uri pathUri = new Uri(path);
        mediaPlayerElement.Source = MediaSource.CreateFromUri(pathUri);
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception.
            // For example: Log error or notify user problem with file
        }
    }
}

Uygulamaya eklenmiş bir medya dosyasına medya kaynağını ayarlamak için, yolu ile öneklenmiş bir ms-appx:/// başlatın, Uri ile bir MediaSource oluşturun ve Kaynağı Uri olarak ayarlayın. Örneğin, Videolar alt klasöründeki video1.mp4 adlı bir dosya için yol şöyle görünür:ms-appx:///Videos/video1.mp4

Önemli

MediaPlayerElement.Source göreli URI'ye (ms-appx/ms-resource) ayarlanması yalnızca Windows Uygulama Paketleme Projesi ile paketlenmiş bir uygulamada çalışır.

Bu kod, daha önce XAML'de tanımlanan MediaPlayerElement öğesinin Source özelliğini ms-appx:///Videos/video1.mp4 olarak ayarlar.

private void LoadEmbeddedAppFile()
{
    try
    {
        Uri pathUri = new Uri("ms-appx:///Videos/video1.mp4");
        mediaPlayerElement.Source = MediaSource.CreateFromUri(pathUri);
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception.
            // For example: Log error or notify user problem with file
        }
    }
}

Yerel medya dosyalarını açma

Dosyaları yerel sistemde veya OneDrive açmak için FileOpenPicker kullanarak dosyayı alabilir ve Source medya kaynağını ayarlayabilir veya kullanıcı medya klasörlerine program aracılığıyla erişebilirsiniz.

Örneğin, uygulamanızın Müzik veya Video klasörlerine kullanıcı etkileşimi olmadan erişmesi gerekiyorsa, örneğin, kullanıcının koleksiyonundaki tüm müzik veya video dosyalarını numaralandırıp bunları uygulamanızda görüntülüyorsanız , Müzik Kitaplığı ve Video Kitaplığı özelliklerini bildirmeniz gerekir. Daha fazla bilgi için bkz. Müzik, Resimler ve Videolar kitaplıklarındaki Dosyalar ve klasörler.

FileOpenPicker, kullanıcının Müzik veya Video klasörleri gibi yerel dosya sistemindeki dosyalara erişmek için özel özellikler gerektirmez, çünkü kullanıcının erişilmekte olduğu dosya üzerinde tam denetime sahiptir. Güvenlik ve gizlilik açısından bakıldığında, uygulamanızın kullandığı özelliklerin sayısını en aza indirmek en iyisidir.

FileOpenPicker kullanarak yerel medyayı açmak için

1. Kullanıcının bir medya dosyası seçmesine izin vermek için FileOpenPicker'ı çağırın.

   Bir medya dosyası seçmek için FileOpenPicker sınıfını kullanın. FileTypeFilter 'yi, 'nin hangi dosya türlerini görüntüleyeceğini seçmek için ayarlayın. Dosya seçiciyi başlatmak ve dosyayı almak için PickSingleFileAsync'i çağırın.

2. Seçilen medya dosyasını MediaPlayerElement.Source olarak ayarlamak için MediaSource kullanın.

   FileOpenPicker tarafından döndürülen StorageFile'ı kullanmak için MediaSource üzerinde CreateFromStorageFile yöntemini çağırmanız ve bunu MediaPlayerElement'in Source'u olarak ayarlamanız gerekir. Medyayı başlatmak için MediaPlayerElement.MediaPlayer üzerinde Yürüt çağırın.

Bu örnek, FileOpenPicker kullanarak bir dosya seçme ve dosyayı MediaPlayerElement için kaynak olarak ayarlama işlemini göstermektedir.

<MediaPlayerElement x:Name="mediaPlayerElement"/>
...
<Button Content="Choose file" Click="Button_Click"/>

private async void Button_Click(object sender, RoutedEventArgs e)
{
    await SetLocalMedia();
}

async private System.Threading.Tasks.Task SetLocalMedia()
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    WinRT.Interop.InitializeWithWindow.Initialize(openPicker, WinRT.Interop.WindowNative.GetWindowHandle(this));

    openPicker.FileTypeFilter.Add(".wmv");
    openPicker.FileTypeFilter.Add(".mp4");
    openPicker.FileTypeFilter.Add(".wma");
    openPicker.FileTypeFilter.Add(".mp3");

    var file = await openPicker.PickSingleFileAsync();

    // mediaPlayerElement is a MediaPlayerElement control defined in XAML
    if (file != null)
    {
        mediaPlayerElement.Source = MediaSource.CreateFromStorageFile(file);

        mediaPlayerElement.MediaPlayer.Play();
    }
}

Poster kaynağını ayarlama

MediaPlayerElement'inize medya yüklenmeden önce görsel bir gösterim sağlamak için PosterSource özelliğini kullanabilirsiniz. , PosterSource medya yerine görüntülenen ekran görüntüsü, film posteri veya albüm resmi gibi bir resimdir. PosterSource aşağıdaki durumlarda görüntülenir:

• Geçerli bir kaynak ayarlanmadığında. Örneğin, Kaynak ayarlanmadı, Source olarak nullayarlandı veya kaynak geçersiz ( MediaFailed olayı gerçekleştiğinde olduğu gibi).
• Medya yüklenirken. Örneğin, geçerli bir kaynak ayarlanmıştır, ancak MediaOpened olayı henüz gerçekleşmemiştir.
• Medya başka bir cihaza akarken.
• Medya yalnızca ses şeklinde olduğunda.

İşte MediaPlayerElement, Kaynağı albüm parçası olarak ayarlanmış, ve PosterSource'u albüm kapağı görüntüsüne ayarlanmıştır.

<MediaPlayerElement Source="ms-appx:///Media/Track1.mp4" PosterSource="ms-appx:///Media/AlbumCover.png"/>

Cihazın ekranını etkin tutma

Genellikle bir cihaz, kullanıcı dışarıdayken pil ömründen tasarruf etmek için ekranı karartır (ve sonunda kapatır), ancak kullanıcının videoyu görebilmesi için video uygulamalarının ekranı açık tutması gerekir. Kullanıcı eylemi algılanmadığında ( örneğin, bir uygulama video oynattığında) ekranın devre dışı bırakılmasını önlemek için DisplayRequest.RequestActive'ı çağırabilirsiniz. DisplayRequest sınıfı, Windows kullanıcının videoyu görebilmesi için ekranı açık tutmasını söylemenizi sağlar.

Güç ve pil ömrünü korumak için DisplayRequest.RequestRelease'ı çağırarak artık gerekli olmadığında görüntüleme isteğini serbest bırakmanız gerekir. Windows, uygulamanız ekrandan hareket ettiğinde uygulamanızın etkin görüntüleme isteklerini otomatik olarak devre dışı bırakır ve uygulamanız ön plana döndüğünde bunları yeniden etkinleştirir.

Görüntüleme isteğini serbest bırakmanız gereken bazı durumlar şunlardır:

• Video oynatma, örneğin kullanıcı tarafından gerçekleştirilen eylemler, arabelleğe alma veya sınırlı bant genişliği nedeniyle ayarlama gibi sebeplerle duraklatılır.
• Çalma durur. Örneğin, video oynamayı bitirdi veya sunum sona erdi.
• Bir oynatma hatası meydana geldi. Örneğin, ağ bağlantısı sorunları veya bozuk bir dosya.

Ekranı etkin tutmak için

1. Genel bir DisplayRequest değişkeni oluşturun. Bunu nullolarak başlatın.

   private DisplayRequest appDisplayRequest = null;
   

2. RequestActive öğesini çağırarak Windows uygulamanın görüntülemenin açık kalmasını gerektirdiğini bildirin.

3. Video oynatma durdurulduğu, duraklatıldığı veya bir oynatma hatasıyla kesintiye uğradığında görüntüleme isteğini salmak için RequestRelease çağırın. Uygulamanızda artık etkin görüntüleme isteği olmadığında Windows cihaz kullanılmadığında ekranı soluk hale getirerek (ve sonunda kapatarak) pil ömründen tasarruf sağlar.

Her MediaPlayerElement.MediaPlayer, MediaPlaybackSession türünde, PlaybackRate, PlaybackState ve Position gibi medya kayıttan yürütmenin çeşitli yönlerini denetleyen bir PlaybackSession'a sahiptir. Burada, görüntüleme isteğini serbest bırakmanız gereken durumları algılamak için MediaPlayer.PlaybackSession üzerindeki PlaybackStateChanged olayını kullanırsınız. Ardından NaturalVideoHeight özelliğini kullanarak bir ses veya video dosyasının oynatılıp oynatılmadığını belirleyin ve yalnızca video oynatılıyorsa ekranı etkin tutun.

<MediaPlayerElement x:Name="mediaPlayerElement" Source="ms-appx:///Videos/video1.mp4"/>

public sealed partial class MainWindow : Window
{
    public DisplayRequest appDisplayRequest = null;
    // using Microsoft.UI.Dispatching;
    private DispatcherQueue dispatcherQueue = DispatcherQueue.GetForCurrentThread();

    public MainWindow()
    {
        this.InitializeComponent();
        mediaPlayerElement.MediaPlayer.PlaybackSession.PlaybackStateChanged += 
            PlaybackSession_PlaybackStateChanged;
    }

    private void PlaybackSession_PlaybackStateChanged(MediaPlaybackSession sender, object args)
    {
        MediaPlaybackSession playbackSession = sender as MediaPlaybackSession;
        if (playbackSession != null && playbackSession.NaturalVideoHeight != 0)
        {
            if (playbackSession.PlaybackState == MediaPlaybackState.Playing)
            {
                if (appDisplayRequest is null)
                {
                    dispatcherQueue.TryEnqueue(DispatcherQueuePriority.Normal, () =>
                    {
                        appDisplayRequest = new DisplayRequest();
                        appDisplayRequest.RequestActive();
                    });
                }
            }
            else // PlaybackState is Buffering, None, Opening, or Paused.
            {
                if (appDisplayRequest is not null)
                {
                    appDisplayRequest.RequestRelease();
                    appDisplayRequest = null;
                }
            }
        }
    }
}

Medya oynatıcıyı programatik olarak kontrol etme

MediaPlayerElement, ses ve video kayıttan yürütmeyi MediaPlayerElement.MediaPlayer özelliği aracılığıyla denetlemek için çok sayıda özellik, yöntem ve olay sağlar. Özelliklerin, yöntemlerin ve olayların tam listesi için MediaPlayer başvuru sayfasına bakın.

Gelişmiş medya oynatma senaryoları

Karmaşık medya oynatma senaryoları için, çalma listesi oynatma, ses dilleri arasında geçiş yapma veya özel meta veri izleri oluşturma gibi durumlarda, MediaPlayerElement.Source'i MediaPlaybackItem veya MediaPlaybackListolarak ayarlayın. Çeşitli gelişmiş medya işlevlerini etkinleştirme hakkında daha fazla bilgi için Medya oynatma sayfasına bakın.

Videoları yeniden boyutlandırma ve uzatma

Video içeriği ve/veya PosterSource’in kapsayıcıyı doldurma şeklini değiştirmek için Stretch özelliğini kullanın. Bu, Esnetme değerine bağlı olarak videoyu yeniden boyutlandırır ve uzatır. Stretch modları, birçok televizyondaki resim boyutu ayarlarına benzer. Bunu bir düğmeye bağlayabilir ve kullanıcının tercih ettiği ayarı seçmesini sağlayabilirsiniz.

• Hiçbiri , içeriğin yerel çözünürlüğünü özgün boyutunda görüntüler. Bu, videonun bir kısmının kırpılması veya videonun kenarlarında siyah çubuklar olmasıyla sonuçlanabilir.
• Tekdüzen, en boy oranını ve video içeriğini korurken mümkün olduğunca fazla alanı doldurur. Bu, videonun kenarlarında yatay veya dikey siyah çubuklarla sonuçlanabilir. Bu, geniş ekran modlarına benzer.
• UniformToFill, en boy oranını koruyarak tüm alanı doldurur. Bu, videonun bir bölümünün kırpılmasıyla sonuçlanabilir. Bu, tam ekran modlarına benzer.
• Doldur tüm alanı doldurur, ancak en boy oranını korumaz. Videolardan hiçbiri kırpılmış değildir, ancak esnetme gerçekleşebilir. Bu, esnetme modlarına benzer.

Burada, AppBarButton kullanılarak Stretch seçenekleri arasında geçiş yapılır. Deyimi switchStretch özelliğinin geçerli durumunu denetler ve numaralandırmadaki Stretch bir sonraki değere ayarlar. Bu, kullanıcının farklı esnetme durumları arasında geçiş yapmasını sağlar.

<AppBarButton Icon="Trim"
              Label="Resize Video"
              Click="PictureSize_Click" />

private void PictureSize_Click(object sender, RoutedEventArgs e)
{
    switch (mediaPlayerElement.Stretch)
    {
        case Stretch.Fill:
            mediaPlayerElement.Stretch = Stretch.None;
            break;
        case Stretch.None:
            mediaPlayerElement.Stretch = Stretch.Uniform;
            break;
        case Stretch.Uniform:
            mediaPlayerElement.Stretch = Stretch.UniformToFill;
            break;
        case Stretch.UniformToFill:
            mediaPlayerElement.Stretch = Stretch.Fill;
            break;
        default:
            break;
    }
}

Düşük gecikmeli oynatmayı etkinleştir

RealTimePlayback özelliğini true üzerinde olarak ayarlayarak media player öğesinin kayıttan yürütme için ilk gecikme süresini azaltmasını sağlayın. Bu, iki yönlü iletişim uygulamaları için kritik öneme sahiptir ve bazı oyun senaryoları için uygulanabilir. Bu modun daha yoğun kaynak kullanımı ve güç açısından daha az verimli olduğunu unutmayın.

Bu örnek bir MediaPlayerElement oluşturur ve RealTimePlaybacktrueolarak ayarlar.

MediaPlayerElement mediaPlayerElement = new MediaPlayerElement();
mediaPlayerElement.MediaPlayer.RealTimePlayback = true;

İlgili makaleler

• Windows uygulamaları için temel tasarım
• Windows uygulamaları için tasarım temelleri