Wideo i Silverlight w praktyce - część 3

 

W ostatnim odcinku krótkiej serii (dla chętnych: część 1 i część 2), omawiającej wykorzystanie technologii Silverlight do odtwarzania materiałów multimedialnych skoncentruję się na meritum, czyli przygotowaniu samego odtwarzacza. Od ostatniego odcinka upłynęło kilka tygodni, w czasie których pojawiły się wersje testowe platformy (Silverlight 2.0 Beta 1) oraz związanych z nią narzędzi - Expression Studio. Poniższe propozycje uwzględniać więc będą nowe funkcjonalności, dotyczące w szczególności Expression Encodera 2.

 

Kontrolki Silverlight w Visual Studio - dla wygodnych programistów

Od pewnego czasu w ramach rozszerzeń ASP.NET  dostępna jest kontrolka Media. To najprostszy sposób na osadzenie gotowego odtwarzacza w ramach strony ASP.NET. Cała konfiguracja sprowadza się do wskazania źródła materiału (Url), oraz właściwości audio-wizualnych - natężenia głosu (opcje Volume i Mute) oraz wyglądu (Configure skin… ). Wraz z kontrolką dostarczane jest kilka gotowych, predefiniowanych skórek. Jest również możliwość wykorzystania w tym celu własnego projektu (zapisanego w formacie XAML):

 

 Uwaga: Nowszą, dystrybuowaną w ramach Silverlight 2 SDK oraz ASP.NET 3.5 Extensions odmianą tej kontrolki jest MediaPlayer.

 

Expression Encoder - dla wygodnych, niekoniecznie programistów

Jeśli nie chcemy wykorzystywać odtwarzacza Silverlight w środowisku ASP.NET, a zależy nam na szybkim przygotowaniu kodu HTML i JavaScript, który realizowałby funkcjonalność analogiczną do opisanych powyżej kontrolek, pomocnym narzędziem może okazać się Expression Encoder. Przygotowując materiał wideo (Uwaga: nie dotyczy to trybu live!), w zakładce Output możemy określić szablon odtwarzacza, który zostanie wygenerowany do podglądu wykonanej pracy. W efekcie uzyskamy kompletną stronę WWW - jedynym jej mankamentem jest jej ścisłe powiązanie z przygotowanym przed chwilą materiałem. Można to jednakże łatwo zmienić - wystarczy otworzyć katalog z wygenerowanym kodem JavaScript (patrz opcja Job Output > Directory) i zajrzeć do pliku StartPlayer.js. W definicji tablicy strCode znaleźć możemy wartość mediaSource, określającą lokalizację źródłowego materiału wideo, np.:

 

var strCode = 'this._playlist=[{ "mediaSource": "przykladowe_video.wmv", …

 

mediaSource w powyższym przykładzie wskazuje na lokalny plik, umieszczony w tym samym katalogu, co strona WWW. Nic nie stoi na przeszkodzie, aby  wartość ta określała dowolną inną lokalizację, przykładowo https://mójserwerwideo/live.

Jeśli podczas testów okaże się, że zmiana parametru mediaSource nie przyniosła właściwych rezultatów, należy upewnić się, że testujemy naszą stronę z wykorzystaniem serwera WWW. Dotyczy to w szczególności scenariusza, w którym nasze źródło skierowane jest do zewnętrznego zasobu (np. strumienia mms) - wystarczy rzucić okiem, czy pojawiający się w przeglądarce internetowej adres URL strony odtwarzacza zaczyna się przedrostkiem http lub https.

Aby osadzić tak przygotowany projekt na własnej stronie WWW należy w jej kodzie wstawić jedynie nastepujący blok (szczegóły znaleźć można w pliku Default.html):

 

<div id="divPlayer_0">  <script  type='text/javascript'>    var player = new StartPlayer_0();  </script></div> 

 

Ważną, choć trudną do zauważenia na pierwszy rzut oka  nowością w Expression Encoder 2 jest integracja z Expression Blend. Obok nazwy szablonu odtwarzacza znajduje się niewielki przycisk skrywający menu kontekstowe. Jedną z dostępnych opcji jest Edit copy in Expression Blend, która pozwala na uruchomienie, zmodyfikowanie i zapis bieżącej skórki w środowisku Blend:

  

Dla prawdziwych mężczyzn - Expression Blend

Największym wyzwaniem jest budowa odtwarzacza od podstaw samodzielnie. W tym celu pomocny będzie oczywiście Expression Blend, jednakże biorąc pod uwagę związany z tym zadaniem nakład pracy, taki scenariusz może mieć sens jedynie w przypadku bardzo specyficznych wymagań dotyczących funkcjonalności bądź wyglądu playera. W większości przypadków lepszym rozwiązaniem jest wykorzystanie jednego z "gotowców" (choćby wspomnianych powyżej szablonów w Expression Encoder) jako podstawy do dalszej rozbudowy i zmian. Zainteresowanych szczegółami odsyłam do artykułu Tima Heuera, o symptomatycznym tytule " Cheating at creating a silverlight media player ".