Learn Windows Phone 7 Development in 31 Days – Day 11 – Working with Media in WP7

Introduction:

In this article we are going to see how to use media framework which helps the application developers to stream video and audio files and to use the integrated Music and video Hubs to select the media files. In our earlier articles we have seen the different controls to design a rich user experience application and today in this topic we will see much more interesting aspects on handling the media files which will be very effective for using in a Mobile device.

Media in windows phone 7 uses the MediaElemt API to incorporate the audio and video files using the inbuilt device media player in Silverlight for Windows Phone 7 Application. In this article we will see how to play a video file using the MediaElement API with windows phone 7 application development. Let us see the step by step process on how to use the Media development in Windows phone 7 application using the MediaElement API. [more]

Steps:

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 application project by providing a valid project name as shown in the screen below.

Now let us customize the Mainpage.XAML by adding a button control and a MediaElement to play the video file as shown in the screen below. Also we have customized the header grid to have a unique design for this series of articles.

XAML Code:

`1`	`ContentPanel" Grid.Row="1" Margin="12,0,12,0">`
`2`	`<Button` `Content="Play Video"` `Height="72"` `HorizontalAlignment="Left"` `Margin="12,30,0,0"` `Name="button1"` `VerticalAlignment="Top"` `Width="427"` `/>`

`3`	`<MediaElement` `Height="356"` `HorizontalAlignment="Left"` `Margin="34,144,0,0"` `Name="mediaElement1"` `VerticalAlignment="Top"` `Width="386"` `/>`
`4`	`</Grid>`

Now let us add a sample video file to the project which we will load on click of the button. We have added a sample .WMV file to the root folder of the project once we added the file now go to the button click event (Play Video button) and write the below code to stream the video file on button click as shown in the below screen.

XAML Code:

`01`	`PhoneApplicationPage`
`02`	`x:Class="F5debugWp7Media.MainPage"`

`03`	`xmlns="<a` `href="http://schemas.microsoft.com/winfx/2006/xaml/presentation%22">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>`
`04`	`xmlns:x="<a` `href="http://schemas.microsoft.com/winfx/2006/xaml%22">http://schemas.microsoft.com/winfx/2006/xaml"</a>`

`05`	`xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"`
`06`	`xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"`

`07`	`xmlns:d="<a` `href="http://schemas.microsoft.com/expression/blend/2008%22">http://schemas.microsoft.com/expression/blend/2008"</a>`
`08`	`xmlns:mc="<a` `href="http://schemas.openxmlformats.org/markup-compatibility/2006"">http://schemas.openxmlformats.org/markup-compatibility/2006"</a>`

`09`	`mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"`
`10`	`FontFamily="{StaticResource PhoneFontFamilyNormal}"`

`11`	`FontSize="{StaticResource PhoneFontSizeNormal}"`
`12`	`Foreground="{StaticResource PhoneForegroundBrush}"`

`13`	`SupportedOrientations="Portrait" Orientation="Portrait"`
`14`	`shell:SystemTray.IsVisible="True">`

`15`
`16`	`<!--<span class="hiddenSpellError" pre="">LayoutRoot</span> is the root grid where all page content is placed-->`

`17`	`<Grid` `x:Name="LayoutRoot"` `Background="Transparent">`
`18`	`<Grid.RowDefinitions>`

`19`	`<RowDefinition` `Height="Auto"/>`
`20`	`<RowDefinition` `Height="*"/>`

`21`	`</Grid.RowDefinitions>`
`22`

`23`	`<!--<span class="hiddenSpellError" pre="">TitlePanel</span> contains the name of the application and page title-->`
`24`	`<StackPanel` `x:Name="TitlePanel"` `Grid.Row="0"` `Margin="12,17,0,28">`

`25`	`<TextBlock` `x:Name="ApplicationTitle"` `Text="F5DEBUG WP7 TUTORIALS"` `Style="{StaticResource PhoneTextNormalStyle}"/>`
`26`	`<TextBlock` `x:Name="PageTitle"` `Text="video player"` `Margin="9,-7,0,0"` `Style="{StaticResource PhoneTextTitle1Style}"/>`

`27`	`</StackPanel>`
`28`

`29`	`<!--ContentPanel - place additional content here-->`
`30`	`<Grid` `x:Name="ContentPanel"` `Grid.Row="1"` `Margin="12,0,12,0">`

`31`	`<Button` `Content="Play Video"` `Height="72"` `HorizontalAlignment="Left"` `Margin="12,30,0,0"` `Name="button1"` `VerticalAlignment="Top"` `Width="427"` `Click="button1_Click"` `/>`
`32`	`<MediaElement` `Height="356"` `HorizontalAlignment="Left"` `Margin="34,144,0,0"` `Name="mediaElement1"` `VerticalAlignment="Top"` `Width="386"` `/>`

`33`	`</Grid>`
`34`	`</Grid>`

`35`
`36`	`PhoneApplicationPage>`

C# Code:

`01`	`using` `System;`
`02`	`using` `System.Collections.Generic;`

`03`	`using` `System.Linq;`
`04`	`using` `System.Net;`

`05`	`using` `System.Windows;`
`06`	`using` `System.Windows.Controls;`

`07`	`using` `System.Windows.Documents;`
`08`	`using` `System.Windows.Input;`

`09`	`using` `System.Windows.Media;`
`10`	`using` `System.Windows.Media.Animation;`

`11`	`using` `System.Windows.Shapes;`
`12`	`using` `Microsoft.Phone.Controls;`

`13`
`14`	`namespace` `F5debugWp7Media`

`15`	`{`
`16`	`public` `partial` `class` `MainPage : PhoneApplicationPage`

`17`	`{`
`18`	`// Constructor`

`19`	`public` `MainPage()`
`20`	`{`

`21`	`InitializeComponent();`
`22`	`}`

`23`
`24`	`private` `void` `button1_Click(object` `sender, RoutedEventArgs e)`

`25`	`{`
`26`	`mediaElement1.Source = new` `Uri("Bear.wmv", UriKind.Relative);`

`27`	`mediaElement1.Play();`
`28`	`}`

`29`
`30`	`}`

31

}

Now we are done with our code, let us build and execute the application by directly pressing the F5 button from the keyboard or by selecting the Build and Execute option from the tool bar. We can see the output of the application as shown in the screen below.

Now we can see the video streaming as shown in the above screen, with the option to restart and reset the video at any point of time. We can also customize to select the file randomly and play as we normally do using the playlists which we can see in depth in our upcoming articles.

Conclusion:

So in this article we have seen how to use the Media Element to stream video files and use it effectively. We will see in depth on the property available to make a customized video player in our upcoming articles.

Karthikeyan Anbarasan (Karthik)http://f5debug.net

Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.