Youtube w Silverlight 3.0?

Wraz z nowym Expression Blendem 3, a właściwie to z Expression Encoderem 3 otrzymaliśmy nową kontrolkę do wyświetlania mediów, czyli MediaPlayer!

Czym jest MediaPlayer?

MediaPlayer to zaawansowana kontrolka do odtwarzania plików video, która opakowuje wszystkie funkcjonalności jakie możemy sobie wymarzyć. Oprócz podstawowego odtwarzania pozwala na tworzenie Playlist, Chapters, AutoLoad, AutoPlay, działa w trybie Offline (po zaakceptowaniu zwiększenia przestrzeni IsolatedStorage), Popout, Transport Controls, Progress Bar, Volume Bar, Full Screen i Closed Caption buttons.

Uruchomienie

Jeśli mamy zainstalowanego Expression Blenda 3 oraz Expression Encoder 3 to kontrolka powinna pojawić się w zakładce Assets-> Media. Jednak jeśli tak się nie stanie, można zrobić to ręcznie, przechodząc do katalogu instalacyjnego Expression Encodera (zwykle jest to "C:\Program Files\Microsoft Expression\Encoder 3") i wybierając katalog "BlendMediaPlayer". W nim znajduje się biblioteka "MediaPlayer.dll" którą wystarczy dołączyć do projekt Silverlight np. w Visual Studio.

W aplikacji Silverlight (dowolnej) w kodzie xaml dodajemy odniesienie do namespace-a, np. "xmlns:media="clr-namespace:ExpressionMediaPlayer;assembly=MediaPlayer" oraz kod odtwarzacza

"<media:MediaPlayer />".

Filmy które chcemy odtwarzać ustawiamy w playlist. To w jaki sposób przekażemy je do kontrolki zależy już tylko od nas. W moim przykładzie ustawiam akurat adresy na sztywno w kodzie.

<media:MediaPlayer x:Name="mediaPlayer" >
<media:MediaPlayer.Playlist>
    <media:Playlist>
        <media:Playlist.Items>                        
            <media:PlaylistItem MediaSource="adresDoFilmu" Title="Star Trek Trailer" VideoHeight="1024" VideoWidth="864" />
        </media:Playlist.Items>
    </media:Playlist>
</media:MediaPlayer.Playlist>
</media:MediaPlayer>

Oczywiście cały powyższy proces można zrealizować w Expression Blend 3 przy pomocy kilku kliknięć. :)

Wygląd

Jeśli podstawowy wygląd kontrolki nie przypadł nam do gustu, możemy zmodyfikować jej template i dostosować wygląd do naszych wymagań. Najłatwiej można to zrobić używając Expression Blenda 3, poprzez wybór prawym myszki na kontrolce, "Edit Template" -> "Edit a copy..".

Live demo

Demo odtwarza HD film "Car accident" w formacie wmv (thx to http://stormscenes.com). Link.

Source Code

link

References

• MediaPlayer control included in Silverlight 3
  
• Silverlight tutorial: Play HD YouTube videos with Silverlight
  

Pozdrawiam,

Jacek Ciereszko