Pada tulisan kali ini, saya akan membahas mengenai bagaimana membangun aplikasi media player yang dapat memutar file video pada windows phone 7. Karena windows phone 7 mendukung Silverlight, maka kita dapat dengan mudah memasukkan komponen media ke dalam aplikasi yang akan kita buat.
Tools yang digunakan :
1. Microsoft Visual studio 2010
2. Windows phone developer tools
3. Silverlight for windows phone
Langkah-langkah :
1. Membuat new project dari visual studio 2010.
Kita pilih menu Windows Phone Application. Lalu tekan OK.
2. Kita add New Folder pada MediaPlayerApp dengan nama Media dan kita copy file video yang akan kita putar pada folder tersebut.
3. Pada halaman designer kita tambahkan komponen button dari toolbox ke dalam windows phone page yang nantinya digunakan sebagai tombol start, pause, dan stop.
Kita set property name dan content button sesuai dengan fungsinya masing-masing (Play, Pause, Stop).
4. Kita tambahkan komponen Media Element dari toolbox ke dalam page yang kita buat.
Komponen Media Element ini berfungsi sebagai area yang digunakan menampilkan video yang sedang diputar.
5. Kita tambahkan komponen progress bar dari kotak toolbox untuk mengetahui progress time dari video yang nantinya akan diputar. Kita beri nama progBarVideo.
6. Seletah kita selesai dengan urusan design user interface dari page windows phone yang kita buat, kita masuk ke level coding untuk menambahkan event handler pada button yang akan melakukan operasi masing-masing fungsionalitas pada media element yang sudah kita buat tadi. Untuk menambahkan event handler pada masing-masing button, kita double click pada masing-masing button atau pada tab event Click properties button. Sehingga pada MainPage.xaml.cs kita dapatkan tiga buah event handler baru.
Source code xaml :
1: <Grid x:Name="LayoutRoot" Background="Transparent">
2: <Grid.RowDefinitions>
3: <RowDefinition Height="Auto"/>
4: <RowDefinition Height="*"/>
5: </Grid.RowDefinitions>
6: <!--TitlePanel contains the name of the application and page title-->
7: <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
8: <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
9: <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" />
10: </StackPanel>
11: <!--ContentPanel - place additional content here-->
12: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
13: <Button Content="Play" Height="72" HorizontalAlignment="Left" Margin="25,514,0,0" Name="btnPlay" VerticalAlignment="Top" Width="131" Click="button1_Click" />
14: <Button Content="Pause" Height="72" HorizontalAlignment="Left" Margin="162,514,0,0" Name="btnPause" VerticalAlignment="Top" Width="135" Click="button2_Click" />
15: <Button Content="Stop" Height="72" HorizontalAlignment="Left" Margin="303,514,0,0" Name="btnStop" VerticalAlignment="Top" Width="134" Click="button3_Click" />
16: <MediaElement Height="430" HorizontalAlignment="Left" Margin="39,47,0,0" Name="mediaVideo" VerticalAlignment="Top" Width="383" AutoPlay="True" />
17: <ProgressBar Height="10" HorizontalAlignment="Left" Margin="39,498,0,0" Name="progBarVideo" VerticalAlignment="Top" Width="383" />
18: </Grid>
19: </Grid>
Source code MainPage.xaml.cs :
1: public partial class MainPage : PhoneApplicationPage
2: {
3: DispatcherTimer progBarPosition = new DispatcherTimer();
4: public MainPage()
5: {
6: InitializeComponent();
7: this.Loaded += new RoutedEventHandler(MainPage_Loaded);
8: }
9: void MainPage_Loaded(object sender, RoutedEventArgs e)
10: {
11: // Tambah Event pada masing-masing komponen
12: progBarPosition.Tick += new EventHandler(currentPosition_Tick);
13: mediaVideo.MediaOpened += new RoutedEventHandler(mediaVideo_MediaOpened);
14: mediaVideo.MediaEnded += new RoutedEventHandler(mediaVideo_MediaEnded);
15: mediaVideo.CurrentStateChanged += new RoutedEventHandler(myMediaElement_CurrentStateChanged);
16: mediaVideo.Source = new Uri("/Media/VideoExample.wmv", UriKind.Relative);
17: }
18: void myMediaElement_CurrentStateChanged(object sender, RoutedEventArgs e)
19: {
20: if (mediaVideo.CurrentState == MediaElementState.Playing)
21: {
22: progBarPosition.Start();
23: btnPlay.IsEnabled = false;
24: btnPause.IsEnabled = true;
25: btnStop.IsEnabled = true;
26: }
27: else if (mediaVideo.CurrentState == MediaElementState.Paused)
28: {
29: progBarPosition.Stop();
30: btnPlay.IsEnabled = true;
31: btnPause.IsEnabled = false;
32: btnStop.IsEnabled = true;
33: }
34: else
35: {
36: progBarPosition.Stop();
37: btnPlay.IsEnabled = true;
38: btnPause.IsEnabled = false;
39: btnStop.IsEnabled = false;
40: }
41: }
42: void mediaVideo_MediaEnded(object sender, RoutedEventArgs e)
43: {
44: mediaVideo.Stop();
45: }
46: void mediaVideo_MediaOpened(object sender, RoutedEventArgs e)
47: {
48: progBarVideo.Maximum = (int)mediaVideo.NaturalDuration.TimeSpan.TotalMilliseconds;
49: mediaVideo.Play();
50: }
51: void currentPosition_Tick(object sender, EventArgs e)
52: {
53: progBarVideo.Value = (int)mediaVideo.Position.TotalMilliseconds;
54: }
55: private void button1_Click(object sender, RoutedEventArgs e)
56: {
57: mediaVideo.Play();
58: }
59: private void button2_Click(object sender, RoutedEventArgs e)
60: {
61: mediaVideo.Pause();
62: }
63: private void button3_Click(object sender, RoutedEventArgs e)
64: {
65: mediaVideo.Stop();
66: }
67: }
7. Kita build dan run aplikasi yang telah kita buat.
Download full source code