[Tutorial] YouTube Videos in your apps the easy way

[Hefinator]

This is my first tutorial here at WPCentral hope you guys like it.

Scenario : Need to implement an YouTube functionality in the app where the app should display a list of YouTube videos in a List and when a taps on it it should play the video.

Solution : Considering that you already have a Visual Studio Windows Phone 8 project open follow these steps

1. From the nuget manager search for the package "MyToolkit.Extended" (This requires the WPToolkit Package too)
2. Once your done with this the next step is to create a Template in App.xaml which will be your layout to display the videos so in App.xaml copy this code.
   Do not forget to declare this
   

       xmlns:extended="clr-namespace:MyToolkit.Controls;assembly=MyToolkit.Extended"

   Then in the Application.Resources copy the code which is below
   

   <DataTemplate x:Key="VideoResultTemplate">
               <Grid Margin="12">
                   <Grid.ColumnDefinitions>
                       <ColumnDefinition Width="200"></ColumnDefinition>
                       <ColumnDefinition Width="*"></ColumnDefinition>
                   </Grid.ColumnDefinitions>
                   <extended:YouTubeButton Width="200" YouTubeID="{Binding VideoID}" Height="150" VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="0"></extended:YouTubeButton>
                   <TextBlock Text="{Binding VideoTitle}" Foreground="Black" VerticalAlignment="Top" Margin="5,0,0,0" TextWrapping="Wrap" Width="150" Grid.Column="1" />
               </Grid>
   </DataTemplate>

   Explanation about this code : All you are doing is creating a DataTemplate which has a grid and has two controls one is a YouTubeButton which is a part of the MyToolkit.Extended package , which displays a small thumbnail of the video and a play icon over it the other control is just TextBox to display the title of the video.
   
   
3. Now lets move to the MainPage.XAML
   Simply make a ListBox and set the ItemTemplate to VideoResultTemplate
   

   <ListBox x:Name="ResultsList" ItemTemplate="{StaticResource VideoResultTemplate}" ItemsSource="{Binding SearchResults}" Tap="ResultsList_Tap" />

   In the MainPage.XAML.VB
   Import These
   

   Imports MyToolkit
   Imports MyToolkit.Controls
   Imports MyToolkit.Multimedia

   
   Now paste this code
   

       Friend WithEvents wc As New WebClient
   
       Public Sub FetchVideoList(searchname As String)
           Dim searchUri = String.Format("http://gdata.youtube.com/feeds/api/videos?q={0}&format=6", HttpUtility.UrlEncode(searchname))
           wc.DownloadStringAsync(New Uri(searchUri))
       End Sub
   
       Private Sub wc_DownloadStringCompleted(sender As Object, e As DownloadStringCompletedEventArgs) Handles wc.DownloadStringCompleted
           Try
               Dim atoms = XNamespace.Get("http://www.w3.org/2005/Atom")
               Dim medians = XNamespace.Get("http://search.yahoo.com/mrss/")
               Dim xml = XElement.Parse(e.Result)
               Dim videoCollection = From entry In xml.Descendants(atoms.GetName("entry")) Select New YouTubeListItem(entry.Element(atoms.GetName("title")).Value, entry.Element(atoms.GetName("id")).Value)
               ResultsList.ItemsSource = videoCollection
           Catch ex As Exception
           End Try
       End Sub

   
   YouTubeListItem
   

   Public Class YouTubeListItem
       Public Property VideoTitle As String
       Public Property VideoID As String
   
       Public Sub New(Title As String, id As String)
           Dim parsed = id.Split("/")
           VideoID = parsed(parsed.Length - 1)
           VideoTitle = Title
       End Sub
   End Class

   
   Explanation of the above code : You are reading the YouTube feed and formatting it correctly for the ItemSource of the Listbox adding each entry of the result to the YouTubeListItem object.
   
   The Results Tap Code
   

   Private Sub ResultsList_Tap(sender As Object, e As System.Windows.Input.GestureEventArgs)
           If ResultsList.SelectedIndex <> -1 Then
               YouTube.Play(CType(ResultsList.SelectedItem, YouTubeListItem).VideoID, YouTubeQuality.Quality480P, Nothing)
           End If
   End Sub

   
   To Load the YouTubeMovies
   Use this code in any of the Events
   

           FetchVideoList("wpcentral")

Hope this has helped.

 

[DBDev]

Nice tutorial! I'm sure someone will find it helpful :wink: