[Tutorial] YouTube Videos in your apps the easy way

Hefinator

New member
Nov 8, 2013
26
0
0
Visit site
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
    Code:
        xmlns:extended="clr-namespace:MyToolkit.Controls;assembly=MyToolkit.Extended"
    Then in the Application.Resources copy the code which is below
    Code:
    <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
    Code:
    <ListBox x:Name="ResultsList" ItemTemplate="{StaticResource VideoResultTemplate}" ItemsSource="{Binding SearchResults}" Tap="ResultsList_Tap" />
    In the MainPage.XAML.VB
    Import These
    Code:
    Imports MyToolkit
    Imports MyToolkit.Controls
    Imports MyToolkit.Multimedia

    Now paste this code
    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
    Code:
    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
    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
    Code:
            FetchVideoList("wpcentral")
Hope this has helped.
 

Members online

Forum statistics

Threads
324,092
Messages
2,244,968
Members
428,165
Latest member
SalvaGaye