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"

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

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">


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


<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>


<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>

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

Click on the pause button to pause the video

Again Click on the play button to restart the video

Resources