×
Namespaces

Variants
Actions

Video Playback with MediaElement in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820, Lumia 920
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Article
Keywords: MediaElement, MediaPlayerLauncher
Created: somnathbanik (05 Oct 2011)
Last edited: hamishwillee (01 Jul 2013)

Introduction

This article demonstrates how to play a video using the MediaElement Windows Phone control and also how to play video from remote server in the default media player using MediaPlayerLauncher.

The example app XAML includes the MediaElement object and set its Source in the .cs file. We also add the play, pause and stop button to control the video. For playing video from local and from server we created two different buttons which has the address of both the videos. There is another button which launches the video in default media player using the MediaPlayerLauncher. For streaming we use HTTP protocol.

Video Streaming

Implementation

First lets create a project with Windows Phone Application Template. Once the project is being created, lets add the MediaElement and six buttons : play, pause, stop, Local, HTTP, Launch Default Player in the XAML file. I have added this components in MainPage.xaml file.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<MediaElement Height="299" HorizontalAlignment="Left" Margin="28,6,0,0" Name="mediaElement1" VerticalAlignment="Top" Width="400" Volume="100"/>
<Button Content="Local" Height="72" HorizontalAlignment="Left" Margin="28,425,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
<Button Content="HTTP" Height="72" HorizontalAlignment="Right" Margin="0,425,28,0" Name="button2" VerticalAlignment="Top" Width="160" Click="button2_Click" />
<Button Content="Launch Default Player" Height="72" HorizontalAlignment="Left" Margin="28,513,0,0" Name="button3" VerticalAlignment="Top" Width="400" Click="button3_Click" />
<Button Content="pause" Height="72" HorizontalAlignment="Left" Margin="28,311,0,0" Name="button4" VerticalAlignment="Top" Width="118" Click="button4_Click" />
<Button Content="play" Height="72" HorizontalAlignment="Left" Margin="164,311,0,0" Name="button5" VerticalAlignment="Top" Width="133" Click="button5_Click" />
<Button Content="stop" Height="72" HorizontalAlignment="Left" Margin="303,311,0,0" Name="button6" VerticalAlignment="Top" Width="125" Click="button6_Click" />
</Grid>

In MainPage.xaml.cs we call PlayVideo() function in each Local and HTTP button event, which starts the video.

public void PlayVideo(string aUrl)
{
mediaElement1.Stop();
mediaElement1.Source = new Uri(aUrl, UriKind.RelativeOrAbsolute);
mediaElement1.Play();
mediaElement1.MediaFailed += new EventHandler<ExceptionRoutedEventArgs>(MediaElement_MediaFailed);
}
 
void MediaElement_MediaFailed(object sender, ExceptionRoutedEventArgs e)
{
var errorException = e.ErrorException;
}

Before we start a new video we call the Stop() to stop the video and then assign a video to the Source. MediaElement_MediaFailed() is used to catch if there is any exception while playing the video. Where mediaElement1 is the name of the MediaElement. The MediaElement object can play Windows Media Video WMV, WMA, MP4, MP3 etc. For more information about supported format please see Supported Media Codecs for Windows Phone.

Note.pngNote: When you add a MediaElement in XAML, always name the MediaElement. Otherwise, the Media Library security capability isn't granted during submission to the Windows Store.

To play a streaming video in default player we use MediaPlayerLauncher.

MediaPlayerLauncher mediaPlayerLauncher = new MediaPlayerLauncher();
mediaPlayerLauncher.Media = new Uri(@"http://video-js.zencoder.com/oceans-clip.mp4", UriKind.Absolute);
mediaPlayerLauncher.Show();

To access MediaPlayerLauncher add the Namespace: Microsoft.Phone.Tasks in .CS file. MediaPlayerLauncher launches the Media Player application and plays the specified media file. So in order to launch the media player we just need to create an instance of MediaPlayerLauncher, set desired properties and then call Show().

Source Code

The full source code of the example is available here: File:StreamingVideoWP7.zip

This page was last modified on 1 July 2013, at 04:57.
809 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×