Video Playback with MediaElement

Comments

Arkoz84PE - Youtube Videos

I am trying to use a link to a Video on Internet. I already have the videos on YouTube but YouTube links do not work. Is there another internet video page I can use?

Arkoz84PE 02:08, 7 April 2013 (EEST)

Log in or Join to leave comments.

See Also

• How to: Use the Media Player Launcher for Windows Phone (MSDN)

Article Metadata

---

Code Example

Source file: Media:StreamingVideoWP7.zip

---

Tested with

SDK: Windows Phone SDK 7.1

Devices(s): WP7 Emulator

---

Compatibility

Platform(s): Windows Phone 7.5

---

Article

Keywords: MediaElement, MediaPlayerLauncher

Created: somnathbanik (05 Oct 2011)

Last edited: hamishwillee (10 Apr 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: 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 Marketplace.

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