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
