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