How to: Play Media on Nokia S60

Example

The first code example shows the main XAML page, VideoScreen.xaml, which contains a MediaElement in a StackPanel layout. A Canvas contains a progress indicator, and a second StackPanel contains VCR buttons.

<UserControl x:Class="SilverPlayer.VideoScreen"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    >
    <StackPanel x:Name="VideoScreenStackPanel" Height="Auto"
        Width="Auto" Loaded="VideoScreenStackPanel_Loaded">

        <!-- video -->
        <MediaElement x:Name="mediaEle"
            DownloadProgressChanged="mediaEle_DownloadProgressChanged"
            MouseLeftButtonUp="mediaEle_MouseLeftButtonUp">
        </MediaElement>

        <!-- video controls & information container -->
        <StackPanel x:Name="VideoControlsStackPanel"
             Visibility="Collapsed" Width="Auto" Height="Auto" >

            <!-- video slider container -->
            <Canvas x:Name="VideoSliderCanvas" Height="30">
                <Rectangle x:Name="backgroundRectangle"
                     Fill="LightGray" Height="10"
                     MouseLeftButtonDown=
                    "playbackProgressRectangle_MouseLeftButtonDown"
                     VerticalAlignment="Center"></Rectangle>
                <Rectangle x:Name="downloadProgressRectangle"
                     Fill="RosyBrown" MouseLeftButtonDown=
                    "playbackProgressRectangle_MouseLeftButtonDown"
                     VerticalAlignment="Center"></Rectangle>
                <Rectangle x:Name="playbackProgressRectangle"
                     Fill="OrangeRed"
                     MouseLeftButtonDown=
                    "playbackProgressRectangle_MouseLeftButtonDown"
                     VerticalAlignment="Center"></Rectangle>
                <Image x:Name="roundCursorImage"
                     MouseLeftButtonDown=
                    "roundCursorImage_MouseLeftButtonDown"
                     MouseLeftButtonUp=
                    "roundCursorImage_MouseLeftButtonUp"
                     MouseMove="roundCursorImage_MouseMove"
                     MouseEnter="roundCursorImage_MouseEnter"
                     MouseLeave="roundCursorImage_MouseLeave"></Image>
            </Canvas>

            <!-- video basic controls container -->
            <StackPanel x:Name="VideoBasicControlsStackPanel"
                 Orientation="Horizontal" Height="30">
                <Button x:Name="backButton" Width="40" Height="Auto"
                     Click="backButton_Click"
                     MouseEnter="backButton_MouseEnter"
                     MouseLeave="backButton_MouseLeave"></Button>
                <Button x:Name="playPauseButton" Width="40"
                     Height="Auto" Click="playPauseButton_Click"
                     MouseEnter="playPauseButton_MouseEnter"
                     MouseLeave="playPauseButton_MouseLeave" ></Button>
                <Button x:Name="fullScreenButton" Width="40"
                     Height="Auto" Click="fullScreenButton_Click"
                     MouseEnter="fullScreenButton_MouseEnter"
                     MouseLeave="fullScreenButton_MouseLeave" ></Button>
                <Button x:Name="volumeImageButton" Width="40"
                     Height="Auto"  Click="volumeImageButton_Click">
                </Button>
                <Slider x:Name="volumeControlSlider" Width="80"
                     Height="Auto" Minimum="0" Maximum="1"
                     SmallChange="0.25" ValueChanged=
                    "volumeControlSlider_ValueChanged" ></Slider>
            </StackPanel>

        </StackPanel>
    </StackPanel>
</UserControl>

This code example for the main XAML page shows the C# code-behind. This example includes code to handle the pressing of the Play/Pause button. The application checks the current state of the MediaElement and takes appropriate action, using the Pause, Play, or Stop method, as appropriate.

        // Code-behind for the main XAML page.
        // When the Play/Pause button is clicked. 
        private void playPauseButton_Click(object sender,
             RoutedEventArgs e)
        {
            // Pause video if it is playing. 
            if (mediaEle.CurrentState == MediaElementState.Playing)
            {
                mediaEle.Pause();
                playPauseButton.Content = new Image() { Source = new
                    BitmapImage() { UriSource = new
                    Uri(ThisApp_Constants.RESOURCES_FOLDER +
                    ThisApp_Constants.PLAY_BUTTON_IMAGE_NAME +
                    ThisApp_Constants.IMAGE_TYPE,
                    UriKind.RelativeOrAbsolute) } };
                playPauseButton.SetValue(
                    ToolTipService.ToolTipProperty, "Play");
            }
            else
            {
                // If video play is already ended, call the Stop
                // method first so that it starts from the beginning. 
                if (m_mediaEle_Position_TotalMilliseconds_Value ==
            m_mediaEle_NaturalDuration_TimeSpan_TotalMilliseconds_Value)
                {
                    mediaEle.Stop();
                    playbackProgressRectangle.Width = 0;
                    roundCursorImage.SetValue(Canvas.LeftProperty,
                         playbackProgressRectangle.Width);
                    m_timerProgressBar.Stop();
                    m_timerProgressBar.Start();
                }
                // Continue or start the video. Update the Play/Pause 
                // button's image & tooltip. 
                mediaEle.Play();
                playPauseButton.Content = new Image() { Source = new
                     BitmapImage() { UriSource = new
                     Uri(ThisApp_Constants.RESOURCES_FOLDER +
                     ThisApp_Constants.PAUSE_BUTTON_IMAGE_NAME +
                     ThisApp_Constants.IMAGE_TYPE,
                     UriKind.RelativeOrAbsolute) } };
                playPauseButton.SetValue(
                    ToolTipService.ToolTipProperty, "Pause");
            }
        }

Compiling the Code

• These code examples require that the complete SilverPlayer sample application be loaded as a project in Visual Studio.

See Also

Concepts