Windows Phone 7 Development : Working with Video (part 1)

3/18/2011 9:28:14 AM

In this first demo, you will build a media player (plays video and audio) that can play, stop, pause, mute, and seek (which is a video player function that lets you move the video forward or backward to any position), whose UI is shown in Figure 1 . You will learn to stream video content from the Internet as well as play content that is part of the application. Just remember that you wouldn't want to package the video as part of the phone application because video or audio files can get very big; so in the real world, you must think about the strategy of deploying media content to the Web and allowing the phone application to simply play the URL.

Also, you can store video content on a Windows IIS media server and take advantage of the smooth streaming technology for HD-quality content and Microsoft DRM protection the server provides. Netflix, for example, uses DRM technology to secure the content of its streaming videos. Microsoft DRM provides a platform to protect digital materials and deliver the contents that can be played on any devices. Also IIS media server can effectively distribute the HD video content to low-bandwidth and low-performing computers (smooth streaming technology). If you would like to learn more about DRM using IIS media streaming server, please refer to http://msdn.microsoft.com/en-us/library/cc838192(VS.95).aspx . Another way to store video content is in the cloud using Microsoft Azure.

Figure 1. Media Player Demo application

You will build the demo application in three major steps. First you will create a Windows Phone project. Next you will build the user interface of the media player and finish up by wiring up the commands in the code that respond to the user.

1. Creating the MediaPlayerDemo Project

To create the Video Demo project, follow the steps you have used in previous examples in this book.

Open Microsoft Visual Studio 2010 Express for Windows Phone on your workstation.
Create a new Windows Phone Application by selecting File => New Project on the Visual Studio command menu. Select the Windows Phone Application template, name the application "MediaPlayerDemo," and click OK.

2. Building the User Interface

You will build the user interface in Visual Studio with XAML. For building simple controls, it is faster to work with the XAML code. Go to Solution Explorer, open MainPage.xaml, and replace the XAML you find there with the following code snippets.

2.1. Declaring the UI Resources

The namespaces you see in the following code snippets are typically declared by default when you first create the Windows Phone project. The namespace xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" will allow you to add common Windows Phone controls required to build this demo: buttons, textblocks, text boxes, list boxes, sliders, and media elements.

<phone:PhoneApplicationPage
    x:Class="MediaPlayerDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True">

2.2. Building the Main Page and Adding Media Player Components

Next, add the code shown in Listing 1 , which creates the common media controls the application will use, like play, pause, stop, mute, and seek. You will be using the Slider control to implement the function that will allow the user to see how much time is elapsed in playing the media content. Also, by clicking the Slider, the user can skip backward and forward. Also you will be adding labels to track video buffering and video downloading status using the textblocks. Lastly, there is a button called "btnMediaPlayerLauncher" that will launch the default Windows Phone's media player to play the media content.

Listing 1. Custom Media Player Main Page and UI (XAML)

<phone:PhoneApplicationPage
    x:Class="MediaPlayerDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock x:Name="PageTitle" Text="MediaPlayerDemo" Margin="-3,-8,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}" FontSize="48" />
        </StackPanel>

        <Grid x:Name="ContentGrid" Grid.Row="1">
            <MediaElement Height="289" HorizontalAlignment="Left"
                          Margin="26,148,0,0" x:Name="mediaPlayer"
                          VerticalAlignment="Top" Width="417"
                          AutoPlay="False"/>
            <Button Content="&gt;" Height="72"
                    HorizontalAlignment="Left" Margin="13,527,0,0"
                    x:Name="btnPlay" VerticalAlignment="Top" Width="87"
                    Click="btnPlay_Click" />
            <Button Content="O" Height="72"
                    HorizontalAlignment="Right" Margin="0,527,243,0"
                    x:Name="btnStop" VerticalAlignment="Top" Width="87"
                    Click="btnStop_Click" />
            <Button Content="||" Height="72" Margin="0,527,313,0"
                    x:Name="btnPause" VerticalAlignment="Top"
                    Click="btnPause_Click" HorizontalAlignment="Right" Width="87" />
            <Slider Height="84" HorizontalAlignment="Left"
                    Margin="13,423,0,0" Name="mediaTimeline"
                    VerticalAlignment="Top" Width="443"
                    ValueChanged="mediaTimeline_ValueChanged"
                    Maximum="1" LargeChange="0.1" />
            <TextBlock Height="30" HorizontalAlignment="Left"
                       Margin="26,472,0,0" Name="lblStatus"
                       Text="00:00" VerticalAlignment="Top" Width="88" FontSize="16" />
            <TextBlock Height="30"
                Margin="118,472,222,0" x:Name="lblBuffering"
                Text="Buffering" VerticalAlignment="Top" FontSize="16" />
            <TextBlock Height="30"
                Margin="0,472,82,0" x:Name="lblDownload"
                Text="Download" VerticalAlignment="Top" FontSize="16"
HorizontalAlignment="Right" Width="140" />
            <Button Content="Mute" Height="72"
                    HorizontalAlignment="Left" Margin="217,527,0,0"
                    Name="btnMute" VerticalAlignment="Top" Width="89"
                    FontSize="16" Click="btnMute_Click" />
            <TextBlock Height="30" HorizontalAlignment="Left"
                       Margin="315,551,0,0" Name="lblSoundStatus"
                       Text="Sound On" VerticalAlignment="Top" Width="128" />

<Button Content="Use MediaPlayerLauncher" FontSize="24" Height="72"
                    HorizontalAlignment="Left" Margin="13,591,0,0"
                    Name="btnMediaPlayerLauncher" VerticalAlignment="Top"
                    Width="411" Click="btnMediaPlayerLauncher_Click" />
            <TextBox x:Name="txtUrl" Height="57" Margin="91,33,8,0"
                     TextWrapping="Wrap" VerticalAlignment="Top" FontSize="16"

Text="http://ecn.channel9.msdn.com/o9/ch9/7/8/2/9/1/5/ARCastMDISilverlightGridComputing_ch9.wm
v"/>
            <TextBlock x:Name="lblUrl" HorizontalAlignment="Left" Height="25"
                       Margin="8,48,0,0" TextWrapping="Wrap" Text="Video URL:"
                       VerticalAlignment="Top" Width="83" FontSize="16"/>
            <TextBox x:Name="txtBufferingTime" Height="57" Margin="151,78,0,0"
                     TextWrapping="Wrap" VerticalAlignment="Top" FontSize="16"
HorizontalAlignment="Left" Width="86" Text="20"/>
            <TextBlock x:Name="lblBufferingTime" HorizontalAlignment="Left"
                       Height="25" Margin="8,93,0,0" TextWrapping="Wrap"
                       Text="Buffering Time (s):" VerticalAlignment="Top"
                       Width="139" FontSize="16"/>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

Once you have loaded the XAML code, you should see the layout shown in Figure 2 . In the next section, you will add code to respond to UI events and implement MediaElement's behaviors.