Display Video in Windows Phone 7


Introduction

In this article, I will explore how to show a video in a Windows Phone 7 application with the help of a Media Element control that will be used as the base platform for the video. There are two ways in a phone application to show a video; the first one is to store the video file and add it to the project, the other way to show a video is directly from the internet. Here I am using a stored video file that has been added to my project. To run this video, first of all we will set the Build Action as a content type in property windows of video file and then set the name of the video file source property of Media Element with .wmv extension as video1.wmv.
                                                                               
To more customize this application, we will give three functionality play, pause and stop to video. Doing this we will used three buttons as play, pause and stop name and their click event handled by code of play, pause and stop method of Media Element. These methods are a public method of the Media Element class so we can call these methods directly using the name of the Media Element control.

Step 1 : Open Visual Studio.
  • Select new -> project
  • Select your preferred language
  • Select Silverlight for Windows Phone application
  • Name the project
  • Now name of project is "WindowsPhoneMediaPlayer"

clock1.gif

clock2.gif

Step  2 :  Open the Toolbox of the Windows Phone application.

  • Drag and Drop from ToolBox a MediaElement Control on MainPage.xaml file.
  • Drag and Drop from ToolBox three buttons control on MainPage.xaml file.

Code

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 <MediaElement Height="353" HorizontalAlignment="Left" Margin="50,78,0,0" Name="mediaElement1" VerticalAlignment="Top" Width="315" Source="vedio1.wmv" AutoPlay="True" />
 <Button Content="play" Height="72" HorizontalAlignment="Left" Margin="27,457,0,0" Name="button1" VerticalAlignment="Top" Width="104" Click="Play_Click"/>
 <Button Content="pause" Height="72" HorizontalAlignment="Left" Margin="154,457,0,0" Name="button2" VerticalAlignment="Top" Width="119" Click="Pause_Click" />
 <Button Content="stop" Height="72" HorizontalAlignment="Left" Margin="305,457,0,0" Name="button3" VerticalAlignment="Top" Width="99" Click="Stop_Click"/>
 </Grid>

Step 3 : The whole code of the MainPage.xaml page:

Code

<phone:PhoneApplicationPage
    x:Class="WindowsPhonePlayer.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"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
 
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Media Player" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
 
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <MediaElement Height="353" HorizontalAlignment="Left" Margin="50,78,0,0" Name="mediaElement1" VerticalAlignment="Top" Width="315" Source="vedio1.wmv" AutoPlay="True" />
            <Button Content="play" Height="72" HorizontalAlignment="Left" Margin="27,457,0,0" Name="button1" VerticalAlignment="Top" Width="104" Click="Play_Click"/>
            <Button Content="pause" Height="72" HorizontalAlignment="Left" Margin="154,457,0,0" Name="button2" VerticalAlignment="Top" Width="119" Click="Pause_Click" />
            <Button Content="stop" Height="72" HorizontalAlignment="Left" Margin="305,457,0,0" Name="button3" VerticalAlignment="Top" Width="99" Click="Stop_Click"/>
        </Grid>
    </Grid>
</
phone:PhoneApplicationPage>

img3.gif

Step 4 : To manipulate the Click event of buttons, we will customize the source code of the MainPage.xaml.cs file.

Code

private void Pause_Click(object sender, RoutedEventArgs e)
 {
   mediaElement1.Pause();
 }
private void Play_Click(object sender, RoutedEventArgs e)
 {
   mediaElement1.Play();
 } 
private void Stop_Click(object sender, RoutedEventArgs e)
 {
  mediaElement1.Stop();
 }

Step 5 : The final source code of the MainPage.xaml.cs file is:

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Threading;
using Microsoft.Phone.Shell;
 
namespace WindowsPhonePlayer
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
        private void Pause_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Pause();
        }
 
        private void Play_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Play();
        }
 
        private void Stop_Click(object sender, RoutedEventArgs e)
        {
            mediaElement1.Stop();
        }
    }
}

Step 6 : Press F5 to run the application.

Output

img4.gif

  • Click on the pause button to pause the video

img5.gif

  • Again Click on the play button to restart the video

img6.gif

Resources

Up Next
    Ebook Download
    View all
    Learn
    View all