Artykuł

freeimages.com freeimages.com
lip 12 2015
0

Player Framework by Microsoft - customizacja

Standardowy player Microsoftu (kontrolka MediaElement), z którego możemy korzystać m.in. w Universal Apps, ma wiele zalet i funkcjonalności, ale ma też niestety dwie poważne wady.

Po pierwsze - nie jest do końca zgodny z MVVM. Nie mamy tutaj wsparcia dla komend, czy ViewModeli. Po drugie, jest bardzo słabo rozszerzalny. Jakakolwiek modyfikacja w większości przypadków jest bardzo trudna, a przecież przy kontrolkach tego typu, rozszerzalność, czy skalowalność to wręcz podstawa. Czy jest zatem jakieś wyjście z całej tej opresji?

Okazuje się, że tak, a jest nim biblioteka Player Framework od Microsoftu, która oprócz wsparcia dla UA, oferuje również końcówki dla Windows 8, HTML5, Silverlight, Windows Phone itp. W dzisiejszym tekście przedstawię kilka ciekawych (mam nadzieję) niaunsów związanych z tym frameworkiem w kontekście użycia w Universal Apps.

Instalacja

Player Framework udostępniany jest na zasadzie rozszerzenia Visual Studio, które możemy pobrać bezpośrednio ze strony projektu.

Po instalacji biblioteka dostępna jest na zasadzie Extensions w Visual Studio. Dla tego jeśli chcemy użyć playera np. w aplikacji na system Windows Phone, to musimy dodać odpowiednie referencje przy użyciu okna Add Reference, na którym musimy znaleźć z kolei sekcję Extensions dla systemu Windows Phone.

Istotną cechą Player Frameworka jest obsługa pluginów. Dlatego jeśli będziecie chcieli skorzystać ze streamingu adapatywnego, czy też reklam, to będziecie musieli włączyć odpowiednie rozszerzenia, na wspomnianym wyżej ekranie, a także jawnie podpiąć określone pluginy w kodzie.

Przykładowe użycie

Samo użycie playera jest banalnie proste. Po pierwsze musimy zdefiniować prefiks do przestrzeni nazw, w której znajduje się player:

xmlns:mpf="using:Microsoft.PlayerFramework"

Po drugie, musimy wkleić podstawowy kod playera. Zaleca się by znajdował się on w głównym kontenerze na stronie:

<Grid>
    <mpf:MediaPlayer Source="http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4" />
</Grid>

Tyle wystarczy by osadzić na stronie funkcjonalny player, który jest w stanie otworzyć różne materiały audio i video. Wiele z funkcjonalności playera (np. widoczność przycisku x),możemy włączać/wyłączać korzystając z dziesiątek wbudowanych w player właściwości. Szczegóły znajdziecie w dokumentacji.

Na koniec tego podrozdziału mam również ważną informację dla wszystkich, którzy wcześniej korzystali z kontrolki MediaElement. Player Framework opakowuje tą kontrolkę, dlatego też wiele rozwiązań i patentów, które działały w tamtym przypadku, zadziała również i tutaj:)

MVVM - InteractiveViewModel

Już na samym starcie Player Framework dostarcza nam nie tylko znacznie większy zestaw funkcjonalności, aniżeli klasyczny MediaElement, ale także znacznie szersze możliwości rozszerzalności oraz obsługę View modeli. W playerze możemy zbindować tzw. InteractiveViewModel, który jest klasą implementującą pewien zestaw metod oraz właściwości z interfejsu IInteractiveViewModel.

Jeśli chcemy na View modelu obsłużyć dodatkowe metody/właściwości/komendy, to najłatwiej jest rozszerzyć istniejącą implementację dodając do niej nowe elementy. Oczywiście samo rozszerzenie View modelu nie wystarczy. Musimy jeszcze gdzieś te nowe obiekty uwzględnić w interfejsie graficznym.

Poniżej linkuje do posta Ananda Prakasha, który opisuje jak do ViewModelu oraz do pliku styli dołożyć obsługę tytułu na playerze. Tytuł zdefiniowany w ten sposób będzie wyświetlać się tylko na odtwarzaczu, w sytuacji gdy widoczne będą kontrolki odtwarzania.

Artykuł ten nie opisuje jednak pewnego niuansu, na który możecie natrafić implementując własny model. Po jego napisaniu, konieczne jest dodanie fałszywego stylu gdzieś w kodzie Waszej aplikacji, dzięki któremu zostaną wygenerowane pliki XamlTypeInfo. Zakładając że nasz CustomInteractiveViewModel znajduje się w przestrzeni oznaczonej prefiksem local, wystarczy że na stronie playera, bądź też np. w pliku App.xaml dodamy taki oto wpis:

<local:CustomInteractiveViewModel x:Key="local:CustomInteractiveViewModelStyle"/>

Customizacja

Player Framework wyjściowo posiada trzy style graficzne:

  • Generic (domyślny)
  • Classic
  • Entertainment

Aby wybrać styl inny niż domyślny, należy na stronie playera (lub np. w jakimś globalnym pliku Resources - App.xaml nie jest wcale złym kandydatem:) wskazać na interesujący nas styl:

<Page.Resources>
	<ResourceDictionary>
		<ResourceDictionary.MergedDictionaries>
			<ResourceDictionary Source="ms-appx:///Microsoft.PlayerFramework/themes/Classic.xaml"/>
		</ResourceDictionary.MergedDictionaries>
	</ResourceDictionary>
</Page.Resources>

Dla stylu Entertainment należy wskazać plik Entertainment.xaml w tej samej lokalizacji. To jednak nie koniec naszych możliwości customizacji.

W przytoczonym wyżej poście Ananda, znajduje się też przepis na wyciągnięcie oraz modyfikację dowolnego z tych plików. Domyślnie można znaleźć je w lokalizacji: :\Program Files (x86)\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Microsoft.PlayerFramework.Xaml\\ Redist\CommonConfiguration\neutral\Microsoft.PlayerFramework\Themes

Później wystarczy zmodyfikować interesujący nas styl, a następnie zapisać plik wewnątrz projektu i wskazać go za pomocą ResourceDictionary.

Modyfikacja pliku styli w połączeniu z InteractiveViewModelem daje nam praktycznie nieograniczone możliwości. Możemy na widoku playera osadzić praktycznie dowolny element - np. ikonkę kategorii wiekowej, która jest w Polsce wymagana prawem. Możemy również zmienić style przycisków, zmienić bieżący loader, czy zmodyfikować wygląd paska postępu. Warto również wspomnieć o tym, że Player Framework posiada sporą liczbę VisualStates, które odnoszą się do obecnego layoutu oraz stanu playera. Zdecydowanie warto się nimi zainteresować:)

Lokalizacja

Player Framework domyślnie dostępny jest w języku angielskim, ale na szczęście bardzo łatwo jest to zmienić. Autorzy biblioteki zadbali o to, by wszystkie kluczowe teksty umieszczone na odtwarzaczu, znalazły się w pliku *.resw.

Plik ten można bardzo łatwo odnaleźć na Codeplexie. Później wystarczy osadzić ten dokument we własnym projekcie/bibliotece, przetłumaczyć interesujące kwestie, a następnie podpiąć go za pomocą ResourceLoadera:

MediaPlayer.ResourceLoader = ResourceLoader.GetForCurrentView("PlayerFrameworkStrings");

Oczywiście jeśli plik resw znajduje się poza naszym projektem, należy uwzględnić odwołanie do odpowiedniego assembly. Więcej na ten temat pisałem tutaj.

Podsumowanie

Player Framework nie jest rozwiązaniem idealnym. Biblioteka ta ma sporo różnych błędów, ale mimo wszystko jest to znacznie bardziej rozbudowana kontrolka, niż standardowy MediaElement. Możliwości rozszerzeń, stylizacji oraz standardowe pluginy dostępne razem z biblioteką robią różnicę. Zdecydowanie warto zainteresować się tym rozwiązaniem, tym bardziej, że już wkrótce będzie dostępne wersja 3.0 (na razie RC) wspierająca Windows 10.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus