Windows 8 Store App _ Youtube Video on Media Element

Hi everyone

I want to show you to how to play a youtube video on Windows 8 Store App Media Element control. We have to use 3th part references called “MyToolKit”. MyToolKit is have a class named Youtube. That class help us to geting video and play on our control.  You can take a look in here http://mytoolkit.codeplex.com/ .

In this site they said that if you want to use this class the NuGet Package is recomended.

Ok lets start and play any video on Windows 8 Store App

First of all we have to install MyToolKit on our project. Open NuGet Package Manager from Tools->Library Package Manager -> Manage Nuget Packages for Solution

Select Online and searh MyToolKit

Thats our package we find it. We have to click on Install button and select assembly which one will use this.

MyToolKit references will add on our project after select an assembly and click OK button.  That was the diffucult side. Lets check out the simple side of our project.

I added a MediaElement control on my StoreApp xaml page and give a name property…

<Pagex:Class=”youtube.MainPage”xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xmlns:local=”using:youtube”

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″

mc:Ignorable=”d”>

<Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”>

<MediaElement Name=”mediaYoutube” HorizontalAlignment=”Left” Height=”522″

Margin=”152,201,0,0″ VerticalAlignment=”Top” Width=”1111″/>

<Button Name=”btnPlay” Content=”Play” HorizontalAlignment=”Left” Margin=”904,71,0,0″

VerticalAlignment=”Top”/>

<TextBox Name=”txtYoutubeID” HorizontalAlignment=”Left” Margin=”529,77,0,0″

TextWrapping=”Wrap” Text=”TextBox” VerticalAlignment=”Top” Width=”370″/>

</Grid>

</Page>

 

 

Last thing we have to do write a little code on btnPlay_Click event

private async void btnPlay_Click(object sender, RoutedEventArgs e){var url = await YouTube.GetVideoUriAsync(txtYoutubeID.Text, YouTubeQuality.Quality480P);

mediaYoutube.Source = url.Uri;

}

 

Thats it. Now we have to select a youtube video and get the video id then play on our project then watch the video.

if youtube link is http://www.youtube.com/watch?v=hNpQpjyc9C8 . this videos ID is going to be “hNpQpjyc9C8” . If we write it to our textbox we can watch this video on our Windows Store App.

Like this.

You can download the source code in here http://sdrv.ms/YfrMdG

I hope that is helpful

May the knowledge be with you

M.Zeki Osmancık

Leave a Reply

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box