Nuta
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować się zalogować lub zmienić katalog.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Odtwarzanie multimediów obejmuje wyświetlanie i odsłuchiwanie wideo i dźwięku za pomocą osadzonych elementów (na stronie lub w grupie innych kontrolek) lub dedykowanych trybów pełnoekranowych.
Użytkownicy oczekują podstawowego zestawu kontrolek, takich jak odtwarzanie/wstrzymywanie, przewijanie do tyłu, przewijanie do przodu, które można modyfikować zgodnie z potrzebami (w tym przyciski odtwarzacza multimediów, tło paska sterowania oraz układ lub rozmieszczenie kontrolek).
Czy jest to właściwa kontrola?
Użyj odtwarzacza multimedialnego, jeśli chcesz odtwarzać dźwięk lub wideo w aplikacji. Aby wyświetlić kolekcję obrazów, użyj widoku przerzucania.
Rekomendacje
Odtwarzacz multimedialny obsługuje zarówno jasne, jak i ciemne motywy, ale ciemny motyw zapewnia lepsze środowisko dla większości scenariuszy rozrywki. Ciemne tło zapewnia lepszy kontrast, w szczególności w przypadku warunków o niskim oświetleniu, a pasek sterowania ogranicza zakłócenia w środowisku wyświetlania.
Podczas odtwarzania zawartości wideo zachęcamy do korzystania z dedykowanego środowiska wyświetlania, promując tryb pełnoekranowy w trybie wbudowanym. Środowisko wyświetlania pełnoekranowego jest optymalne, a opcje są ograniczone w trybie wbudowanym.
Jeśli masz miejsce na ekranie, wybierz układ dwurzędowy. Zapewnia więcej miejsca na kontrolki niż kompaktowy układ pojedynczego wiersza i może być łatwiejszy do nawigowania przy użyciu różnych danych wejściowych.
Domyślne kontrolki zostały zoptymalizowane pod kątem odtwarzania multimediów, jednak masz możliwość dodawania opcji niestandardowych potrzebnych do odtwarzacza multimediów w celu zapewnienia najlepszego środowiska aplikacji. Odwiedź Tworzenie niestandardowych kontrolek transportu, aby dowiedzieć się więcej o dodawaniu niestandardowych kontrolek.
Tworzenie odtwarzacza multimediów
- Kluczowe interfejsy API: MediaPlayerElement, MediaTransportControls klasa
Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub
Dodaj multimedia do aplikacji, tworząc obiekt MediaPlayerElement w języku XAML i ustawiając źródło na MediaSource wskazującego plik audio lub wideo.
Ten kod XAML tworzy MediaPlayerElement i ustawia jego właściwość Source na identyfikator URI pliku wideo lokalnego dla aplikacji.
MediaPlayerElement rozpoczyna odtwarzanie podczas ładowania strony. Aby opóźnić automatyczne uruchamianie multimediów, można ustawić właściwość autoodtwarzania na false.
<MediaPlayerElement x:Name="mediaPlayerElement"
Source="ms-appx:///Videos/video1.mp4"
Width="400" AutoPlay="True"/>
Ten kod XAML tworzy
<MediaPlayerElement x:Name="mediaPlayerElement"
Source="ms-appx:///Videos/video1.mp4"
Width="400"
AutoPlay="False"
AreTransportControlsEnabled="True"/>
Ważne
Ustawienie MediaPlayerElement.Source jako względnego identyfikatora URI (ms-appx/ms-resource) działa tylko w aplikacji spakowanej za pomocą Projektu Pakietowania Aplikacji systemu Windows. Jeśli aplikacja nie używa projektu tworzenia pakietów aplikacji systemu Windows, zalecanym obejściem jest przekonwertowanie względnego ms-appx:/// identyfikatora URI na w pełni rozpoznany file:/// identyfikator URI. Zobacz również sekcje Set the media source and Open local media files (Otwieranie lokalnych plików multimedialnych) w dalszej części tego artykułu.
Mechanizmy kontroli transportu multimediów
MediaPlayerElement ma wbudowane kontrolki transportu obsługujące odtwarzanie, zatrzymywanie, pauza, głośność, wyciszanie, wyszukiwanie/postęp, podpisy zamknięte i wybór ścieżki audio. Aby włączyć te kontrolki, ustaw AreTransportControlsEnabled na true. Aby je wyłączyć, ustaw AreTransportControlsEnabled na false. Kontrolki transportu są reprezentowane przez klasę MediaTransportControls . Możesz użyć kontrolek transportu as-islub dostosować je na różne sposoby. Aby uzyskać więcej informacji, zobacz odniesienie do klasy MediaTransportControls i Tworzenie niestandardowych elementów sterujących transportem.
Kontrolki transportu obsługują układy jedno-i dwurzędowe. Pierwszy przykład to układ pojedynczego wiersza z przyciskiem odtwarzania/wstrzymania znajdującym się po lewej stronie osi czasu multimediów. Ten układ jest najlepiej zarezerwowany do odtwarzania multimediów wbudowanych i ekranów kompaktowych.
Układ kontrolek z podwójnym wierszem (poniżej) jest zalecany w przypadku większości scenariuszy użycia, szczególnie na większych ekranach. Ten układ zapewnia więcej miejsca na sterowanie i ułatwia użytkownikowi korzystanie z osi czasu.
Systemowe kontrolki transportu mediów
Element MediaPlayerElement jest automatycznie zintegrowany z systemowymi kontrolkami transportu multimediów. Kontrolki systemowego transportu multimediów to elementy sterujące, które pojawiają się po naciśnięciu sprzętowych klawiszy multimedialnych, takich jak przyciski na klawiaturach. Aby uzyskać więcej informacji, zobacz SystemMediaTransportControls.
Ustawianie źródła multimediów
Aby odtworzyć pliki znajdujące się w sieci lub osadzone w aplikacji, ustaw właściwość Source na MediaSource ze ścieżką pliku.
Wskazówka
Aby otworzyć pliki z Internetu, należy zadeklarować w manifeście aplikacji (Package.appxmanifest) uprawnienie Internet (Klient). Aby uzyskać więcej informacji na temat deklarowania możliwości, zobacz Deklaracje możliwości aplikacji.
Ten kod próbuje ustawić właściwość Source elementu MediaPlayerElement zdefiniowanego w XAML na ścieżkę pliku podaną w polu TextBox.
<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
}
}
}
Aby ustawić źródło multimediów na plik multimedialny osadzony w aplikacji, zainicjuj identyfikator URI ścieżką z prefiksem ms-appx:///, utwórz MediaSource za pomocą identyfikatora URI, a następnie ustaw source na identyfikator URI. Na przykład w przypadku pliku o nazwie video1.mp4 , który znajduje się w podfolderze Videos , ścieżka będzie wyglądać następująco: ms-appx:///Videos/video1.mp4
Ważne
Ustawienie MediaPlayerElement.Source jako względnego identyfikatora URI (ms-appx/ms-resource) działa tylko w aplikacji spakowanej za pomocą Projektu Pakietowania Aplikacji systemu Windows.
Ten kod ustawia właściwość Source w elemencie MediaPlayerElement, zdefiniowanym wcześniej w XAML, na ms-appx:///Videos/video1.mp4.
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
}
}
}
Otwieranie lokalnych plików multimedialnych
Aby otworzyć pliki w systemie lokalnym lub w usłudze OneDrive, możesz użyć narzędzia FileOpenPicker , aby pobrać plik i źródło , aby ustawić źródło multimediów, lub programowo uzyskać dostęp do folderów multimediów użytkownika.
Jeśli aplikacja potrzebuje dostępu bez interakcji użytkownika z folderami Muzyka lub Wideo , na przykład jeśli wyliczasz wszystkie pliki muzyczne lub wideo w kolekcji użytkownika i wyświetlasz je w aplikacji, musisz zadeklarować możliwości biblioteki muzycznej i biblioteki wideo . Aby uzyskać więcej informacji, zobacz Pliki i foldery w bibliotekach Muzyka, Obrazy i Wideo.
FileOpenPicker nie wymaga specjalnych możliwości uzyskiwania dostępu do plików w lokalnym systemie plików, takich jak foldery Muzyka użytkownika lub Wideo, ponieważ użytkownik ma pełną kontrolę nad tym, do którego pliku uzyskuje się dostęp. Z punktu widzenia bezpieczeństwa i prywatności najlepiej zminimalizować liczbę funkcji używanych przez aplikację.
Aby otworzyć nośnik lokalny przy użyciu narzędzia FileOpenPicker
Wywołaj metodę FileOpenPicker , aby umożliwić użytkownikowi wybranie pliku multimedialnego.
Użyj klasy FileOpenPicker , aby wybrać plik multimedialny. Ustaw FileTypeFilter, aby określić, które typy plików wyświetla
FileOpenPicker. Wywołaj metodę PickSingleFileAsync , aby uruchomić selektor plików i pobrać plik.Użyj elementu MediaSource , aby ustawić wybrany plik multimedialny jako MediaPlayerElement.Source.
Aby użyć StorageFile zwróconych z FileOpenPicker, należy wywołać metodę CreateFromStorageFile w MediaSource i ustawić ją jako ŹródłoMediaPlayerElement. Następnie wywołaj metodę Play na MediaPlayerElement.MediaPlayer, aby rozpocząć odtwarzanie multimediów.
W tym przykładzie pokazano, jak użyć FileOpenPicker, aby wybrać plik i ustawić go jako źródło dla MediaPlayerElement.
<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();
}
}
Ustawianie źródła plakatu
Możesz użyć właściwości PosterSource, aby zapewnić swojemu MediaPlayerElement reprezentację wizualną przed załadowaniem mediów. A PosterSource to obraz, taki jak zrzut ekranu, plakat filmowy lub grafika albumu, który jest wyświetlany zamiast multimediów. Element PosterSource jest wyświetlany w następujących sytuacjach:
- Jeśli prawidłowe źródło nie jest ustawione. Na przykład źródło nie jest ustawione,
Sourceustawiono nanull, lub źródło jest nieprawidłowe (tak jak w przypadku wystąpienia zdarzenia MediaFailed). - Podczas ładowania multimediów. Na przykład ustawiono prawidłowe źródło, ale zdarzenie MediaOpened nie wystąpiło jeszcze.
- Gdy nośnik jest przesyłany strumieniowo do innego urządzenia.
- Gdy nośnik jest tylko audio.
Oto MediaPlayerElement z Source ustawionym na utwór albumu oraz PosterSource ustawionym na obraz okładki albumu.
<MediaPlayerElement Source="ms-appx:///Media/Track1.mp4" PosterSource="ms-appx:///Media/AlbumCover.png"/>
Zachowaj aktywny ekran urządzenia
Zazwyczaj urządzenie przyciemnia ekran (i ostatecznie wyłącza go), aby zaoszczędzić żywotność baterii, gdy użytkownik jest wyłączony, ale aplikacje wideo muszą zachować ekran, aby użytkownik mógł zobaczyć film wideo. Aby zapobiec dezaktywowaniu wyświetlania, gdy akcja użytkownika nie jest już wykrywana, na przykład gdy aplikacja odtwarza wideo, możesz wywołać funkcję DisplayRequest.RequestActive. Klasa DisplayRequest umożliwia systemowi Windows pozostawienie włączonego wyświetlania, aby użytkownik mógł zobaczyć film wideo.
Aby zaoszczędzić moc i żywotność baterii, należy wywołać funkcję DisplayRequest.RequestRelease , aby zwolnić żądanie wyświetlania, gdy nie jest już wymagane. System Windows automatycznie dezaktywuje aktywne żądania wyświetlania aplikacji, gdy aplikacja przechodzi poza ekran i aktywuje je ponownie po powrocie aplikacji na pierwszy plan.
Oto kilka sytuacji, w których należy zwolnić żądanie wyświetlania:
- Odtwarzanie wideo jest wstrzymane, na przykład przez akcję użytkownika, buforowanie lub korektę z powodu ograniczonej przepustowości.
- Odtwarzanie zatrzymuje się. Na przykład wideo się skończyło lub prezentacja się skończyła.
- Wystąpił błąd odtwarzania. Na przykład problemy z łącznością sieciową lub uszkodzony plik.
Aby zachować aktywny ekran
Utwórz globalną zmienną DisplayRequest . Zainicjuj go do
null.private DisplayRequest appDisplayRequest = null;Wywołaj metodę RequestActive , aby powiadomić system Windows, że aplikacja wymaga, aby ekran pozostał włączony.
Wywołaj RequestRelease, aby zwolnić żądanie wyświetlania za każdym razem, gdy odtwarzanie wideo zostanie zatrzymane, wstrzymane lub przerwane przez błąd odtwarzania. Gdy aplikacja nie ma już żadnych aktywnych żądań wyświetlania, system Windows oszczędza żywotność baterii, przyciemniając ekran (i ostatecznie wyłączając go), gdy urządzenie nie jest używane.
Każdy MediaPlayerElement.MediaPlayer ma PlaybackSession typu MediaPlaybackSession, który kontroluje różne aspekty odtwarzania multimediów, takie jak PlaybackRate, PlaybackState i Position. W tym miejscu użyjesz zdarzenia PlaybackStateChanged w pliku MediaPlayer.PlaybackSession , aby wykryć sytuacje, w których należy zwolnić żądanie wyświetlania. Następnie użyj właściwości NaturalVideoHeight , aby określić, czy plik audio lub wideo jest odtwarzany, i zachować ekran aktywny tylko wtedy, gdy wideo jest odtwarzane.
<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;
}
}
}
}
}
Programowe sterowanie odtwarzaczem multimedialnym
MediaPlayerElement udostępnia wiele właściwości, metod i zdarzeń umożliwiających kontrolowanie odtwarzania audio i wideo poprzez właściwość MediaPlayerElement.MediaPlayer. Aby uzyskać pełną listę właściwości, metod i zdarzeń, zobacz stronę referencyjną MediaPlayer .
Zaawansowane scenariusze odtwarzania multimediów
W przypadku bardziej złożonych scenariuszy odtwarzania multimediów, takich jak odtwarzanie listy odtwarzania, przełączanie między językami audio lub tworzenie niestandardowych ścieżek metadanych, ustaw
Zmienianie rozmiaru i rozciąganie wideo
Użyj właściwości Stretch, aby zmienić sposób, w jaki zawartość wideo i/lub PosterSource wypełniają kontener, w którym się znajdują. Rozmiar i rozciągnięcie wideo zależą od wartości Stretch. Stany Stretch są podobne do ustawień rozmiaru obrazu w wielu telewizorach. Możesz podłączyć go do przycisku i zezwolić użytkownikowi na wybranie preferowanego ustawienia.
- None wyświetla natywną rozdzielczość zawartości w oryginalnym rozmiarze. Może to skutkować przycięciem obrazu lub pojawieniem się czarnych pasów na brzegach filmu wideo.
- Uniform wypełnia maksymalnie dużo miejsca, zachowując współczynnik proporcji i zawartość wideo. Może to spowodować poziome lub pionowe czarne słupki na krawędziach filmu wideo. Jest to podobne do trybów pełnoekranowych.
- UniformToFill wypełnia całą przestrzeń, zachowując współczynnik proporcji. Może to spowodować przycięcie niektórych klipów wideo. Jest to podobne do trybów pełnoekranowych.
- wypełnia wypełnia całą przestrzeń, ale nie zachowuje współczynnika proporcji. Żadne wideo nie zostało przycięte, ale może wystąpić rozciąganie. To jest podobne do trybów rozciągania.
W tym miejscu AppBarButton jest używany do przełączania opcji Stretch. Instrukcja switch sprawdza bieżący stan właściwości Stretch i ustawia ją na następną wartość w wyliczeniu Stretch. Dzięki temu użytkownik może przechodzić przez różne stany rozciągania.
<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;
}
}
Włączanie odtwarzania o małych opóźnieniach
Ustaw właściwość true na wartość w elemecie MediaPlayerElement.MediaPlayer, aby umożliwić elementowi odtwarzacza multimediów zmniejszenie początkowego opóźnienia odtwarzania. Ma to kluczowe znaczenie dla aplikacji komunikacji dwukierunkowej i może mieć zastosowanie do niektórych scenariuszy gier. Należy pamiętać, że ten tryb jest bardziej obciążający zasoby i mniej wydajny.
W tym przykładzie tworzysz MediaPlayerElement i ustawiasz RealTimePlayback na true.
MediaPlayerElement mediaPlayerElement = new MediaPlayerElement();
mediaPlayerElement.MediaPlayer.RealTimePlayback = true;
UwP i WinUI 2
Ważne
Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.
Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.
API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.
- interfejsy API platformy UWP:klasa MediaPlayerElement,, klasa MediaTransportControls
-
Otwórz aplikację Galeria WinUI 2 i zobacz działanie elementu MediaPlayerElement. Aplikacja z galerii
WinUI 2 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji winUI 2. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub.
Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.
Jeśli projektujesz interfejs z doświadczeniem w odległości 10 stóp, wybierz układ dwurzędowy. Zapewnia więcej miejsca na kontrolki niż kompaktowy układ pojedynczego wiersza i łatwiej jest poruszać się za pomocą gamepadu dla 10 stóp. Zobacz artykuł Projektowanie dla konsoli Xbox i telewizora, aby uzyskać więcej informacji na temat optymalizacji aplikacji do środowiska z odległości 10 stóp.
MediaPlayerElement jest dostępna tylko w systemie Windows 10 w wersji 1607 lub nowszej. Jeśli tworzysz aplikację dla starszej wersji systemu Windows 10, musisz zamiast tego użyć kontrolki MediaElement . Wszystkie zalecenia wprowadzone tutaj mają zastosowanie również do MediaElement .
Powiązane artykuły
Współpracuj z nami na GitHub
Źródło tej treści można znaleźć na GitHubie, gdzie można także tworzyć i przeglądać problemy oraz pull requesty. Więcej informacji znajdziesz w naszym przewodniku dla współautorów.
Windows developer