Saturday, July 13, 2013

Embed YouTube videos into your Windows Phone/Windows 8 app

    That was quite a long time with no blog post, but I am coming back. Recently I had to investigate the possibility to embed youtube videos in an Windows Phone application. The easy way is to simply launch IE with the Uri of the video, but this way you have no control over the video as your app will get suspended. I then had a look at the Youtube client apps available in the Windows Phone Store and saw that some of them integrate the video directly into the app. So wanna know how they are doing this?
   Well there is a library availabe on codeplex called MyToolkit. This library has a class that is able to retreieve the Uri of the video stream directly from the YouTube video id. You can then download the stream for offline access or can directly play the video using the MediaPlayerLauncher. MyToolkit is also available as a nu-get component so you can directly add a reference to it.
     The MyToolkit library is really nice, but what if we could improve it a little bit more and have more control over the video? If we would be able to play the video inside our application page would give us the possibility, for example, to add advertising on top of the video (video apps have a good chance of monetizing using advertising as the user, just like in games, would probably stay longer on that page). For this task we can use Microsoft Player Framework that is available for both Windows Phone 8 and Windows 8. Even more the Player Framework will handle the buffering depending on your connection speed, it is a control inside your page and also will give you full-control over the video playback. (the Player Framework is awesome and is expandible).
    So let's create a small test application. First download and install the Player Framework as it is not available on nu-get (yet). I have used the version 1.3 beta. Then create a new Windows Phone 8 project add reference to the Media Player Framework Windows Phone extension and then, from nu-get, get the MyToolkit.Extended library. For simplicity my MainPage looks like this :

   <Grid x:Name="LayoutRoot" Background="Transparent">  
     <mmppf:MediaPlayer x:Name="player">   
     </mmppf:MediaPlayer>  
   </Grid>  

where mmpf is:
 xmlns:mmppf="clr-namespace:Microsoft.PlayerFramework;assembly=Microsoft.PlayerFramework"  

    Now on Loaded event I use MyToolkit to retrieve the YouTube stream Uri and then pass it to the MediaPlayer:

 private async void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)  
     {  
       var videoUri = await MyToolkit.Multimedia.YouTube.GetVideoUriAsync("PQVlW4xbNuI", MyToolkit.Multimedia.YouTubeQuality.Quality480P, MyToolkit.Multimedia.YouTubeQuality.Quality480P);  
       if (videoUri != null)  
         player.Source = videoUri.Uri;  
     }  

    For convenience the page is set to landscape. I don't know if playing Youtube video using this method is 100% legal as it bypasses the advertising (it is what every other windows phone YouTube app is using including the one from Microsoft that was pulled out of the store).
    Also pay attention that there are some videos where the resulting stream is protected/encoded and cannot be played by the Player Framework. One of these videos is Girl on fire by Alicia Keys. Also Microsoft's Youtube app (if you still have it installed ) was not able to open this type of streams and just gives an error while MetroTube, after realizing that it cannot open the stream inside the app, it launches Internet Explorer with the "classic" link to the video.
    The same method and libraries can be used for your Windows 8 store application.

    Here is the Source Code. (the video I use is my own).

NAMASTE

9 comments:

  1. Hi I've followed your guide of the how to "Embed YouTube videos into your Windows Phone/Windows 8 app" all as you said, but, when I run my app on the emulator, the app simplily doesn showt you anything, could you give me a little healp please

    ReplyDelete
  2. Thanks for sharing this useful information "Embed YouTube videos into your Windows Phone/Windows 8 app" with us. It's really helpful for me mobile application development companies in dallas

    ReplyDelete
  3. Hi I’ve followed your guide of the how to “Embed YouTube videos into your Windows Phone/Windows 8 app” all as you said, but, when I run my app on the emulator, the app simplily doesnt show you anything, could you give me a little help please

    ReplyDelete
  4. private async void button_Click(object sender, RoutedEventArgs e)
    {

    var url = await YouTube.GetVideoUriAsync("PQVlW4xbNuI", YouTubeQuality.Quality1080P);
    MediaPlayerLauncher media = new MediaPlayerLauncher();
    media.Media = url.Uri;
    media.Show();

    }
    this is my code sir i always get exception in first line please help

    ReplyDelete
  5. I was one of the many who was hanging on to the previously working version of the Microsoft YouTube app and finally upgraded to the new version when it was announced that they had worked out their differences. The new app seems to comply with Google’s demands: show ads and prevent video downloads. Does anyone know what Google’s new demands are to justify blocking YouTube access to more than 50 million Windows Phone users worldwide?.

    ReplyDelete
  6. Because the mobile phone applications industry has got obtained the increase, the device application builders have begun mobile apps improvement just like any other growing product. an individual title your own necessity and you will find several apps available for that, whether it be research, game titles, chatting, email, cricket match results, news and so on. More information is available on their web site at http://www.mobileappsblog.co.uk/

    ReplyDelete
  7. Mobile developers have created the most wonderful unimaginably, it has awesome features; the design is sleek; the interface is intuitive and with all its visualization color management really have created the explainable videos feature.To know more about App Videos fallow to link.

    ReplyDelete
  8. his is great! I've been meaning to figure out how subtitling/captions work too (let alone the fact I have yet to create any YouTube videos!)

    Thanks so much for the clear documentation!
    Youtube Help,please visit the link.

    Thankyou
    Lacy Brown

    ReplyDelete
  9. ISHIR iphone versatile improvement group has a nitty gritty comprehension of the Apple stage, rich set of instruments, Apis and the different segments included incorporating the Cocoa Touch, Xcode IDE, Core Audio, Webkit Programming, Accelerometer, GPS and Core Data Framework.mobile app development // mobile app developers // iPhone app maker

    ReplyDelete