Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 01:57, 1 July 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Video Playback with MediaElement in Windows Phone

From 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 01:57.
819 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.

×