Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 11 – Working with Media in WP7

 

Introduction:

In this article we are going to see how to use media framework which helps the application developers to stream video and audio files and to use the integrated Music and video Hubs to select the media files. In our earlier articles we have seen the different controls to design a rich user experience application and today in this topic we will see much more interesting aspects on handling the media files which will be very effective for using in a Mobile device.    

Media in windows phone 7 uses the MediaElemt API to incorporate the audio and video files using the inbuilt device media player in Silverlight for Windows Phone 7 Application. In this article we will see how to play a video file using the MediaElement API with windows phone 7 application development. Let us see the step by step process on how to use the Media development in Windows phone 7 application using the MediaElement API.      [more]


Steps:

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 application project by providing a valid project name as shown in the screen below.

clip_image002

Now let us customize the Mainpage.XAML by adding a button control and a MediaElement to play the video file as shown in the screen below. Also we have customized the header grid to have a unique design for this series of articles.


XAML Code:

1

ContentPanel" Grid.Row="1" Margin="12,0,12,0">

2

<Button Content="Play Video" Height="72" HorizontalAlignment="Left" Margin="12,30,0,0" Name="button1" VerticalAlignment="Top" Width="427" />

3

<MediaElement Height="356" HorizontalAlignment="Left" Margin="34,144,0,0" Name="mediaElement1" VerticalAlignment="Top" Width="386" />

4

</Grid>

clip_image004

Now let us add a sample video file to the project which we will load on click of the button. We have added a sample .WMV file to the root folder of the project once we added the file now go to the button click event (Play Video button) and write the below code to stream the video file on button click as shown in the below screen.


XAML Code:

01

PhoneApplicationPage

02

x:Class="F5debugWp7Media.MainPage"

03

xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation%22">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>

04

xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml%22">http://schemas.microsoft.com/winfx/2006/xaml"</a>

     

05

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

06

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

07

xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008%22">http://schemas.microsoft.com/expression/blend/2008"</a>

08

xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;">http://schemas.openxmlformats.org/markup-compatibility/2006"</a>

     

09

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

10

FontFamily="{StaticResource PhoneFontFamilyNormal}"

11

FontSize="{StaticResource PhoneFontSizeNormal}"

12

Foreground="{StaticResource PhoneForegroundBrush}"

13

SupportedOrientations="Portrait" Orientation="Portrait"

14

shell:SystemTray.IsVisible="True">

15

 

16

<!--<span class="hiddenSpellError" pre="">LayoutRoot</span> is the root grid where all page content is placed-->

17

<Grid x:Name="LayoutRoot" Background="Transparent">

18

<Grid.RowDefinitions>

19

<RowDefinition Height="Auto"/>

20

<RowDefinition Height="*"/>

21

</Grid.RowDefinitions>

22

 

23

<!--<span class="hiddenSpellError" pre="">TitlePanel</span> contains the name of the application and page title-->

24

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

25

<TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>

26

<TextBlock x:Name="PageTitle" Text="video player" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

27

</StackPanel>

28

 

29

<!--ContentPanel - place additional content here-->

30

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

31

<Button Content="Play Video" Height="72" HorizontalAlignment="Left" Margin="12,30,0,0" Name="button1" VerticalAlignment="Top" Width="427" Click="button1_Click" />

32

<MediaElement Height="356" HorizontalAlignment="Left" Margin="34,144,0,0" Name="mediaElement1" VerticalAlignment="Top" Width="386" />

33

</Grid>

34

</Grid>

35

 

36

PhoneApplicationPage>


C# Code:

01

using System;

02

using System.Collections.Generic;

03

using System.Linq;

04

using System.Net;

05

using System.Windows;

06

using System.Windows.Controls;

07

using System.Windows.Documents;

08

using System.Windows.Input;

09

using System.Windows.Media;

10

using System.Windows.Media.Animation;

11

using System.Windows.Shapes;

12

using Microsoft.Phone.Controls;

13

 

14

namespace F5debugWp7Media

15

{

16

public partial class MainPage : PhoneApplicationPage

17

{

18

// Constructor

19

public MainPage()

20

{

21

InitializeComponent();

22

}

23

 

24

private void button1_Click(object sender, RoutedEventArgs e)

25

{

26

mediaElement1.Source = new Uri("Bear.wmv", UriKind.Relative);

27

mediaElement1.Play();

28

}

29

 

30

}

31

}

clip_image006

Now we are done with our code, let us build and execute the application by directly pressing the F5 button from the keyboard or by selecting the Build and Execute option from the tool bar. We can see the output of the application as shown in the screen below.

clip_image008
Now we can see the video streaming as shown in the above screen, with the option to restart and reset the video at any point of time. We can also customize to select the file randomly and play as we normally do using the playlists which we can see in depth in our upcoming articles.

Conclusion:

So in this article we have seen how to use the Media Element to stream video files and use it effectively. We will see in depth on the property available to make a customized video player in our upcoming articles.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Comments (1) -

Maryjo Matts
Maryjo Matts
8/31/2013 5:50:40 AM #

Hardly can I believe that such faultless blogs exist.

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter