Loading external video into your Hulu inspired Silverlight video player

This is part 2 in our series of building a Hulu inspired video player. This tutorial may well be the most important in the process of building a Silverlight video player.

In our previous example “Building a Play-Pause control for a Hulu inspired SilverLight video player” the video was included within the Silverlight file. This caused a very bad user experience because the user had to wait to load the entire video before the file was shown.

By setting the video source to be remote, the Silverlight file is now 14k as compared to 6,700k. Now, the Silverlight file which simply contains a MediaElement is loaded almost instantaneously and the video plays as it loads.

View all parts of the tutorial
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

You can play and pause the video

XAML code

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:HuluSilverLight"
	x:Class="HuluSilverLight.MainPage"
	Width="640" Height="276" mc:Ignorable="d">
	<Grid x:Name="LayoutRoot" Margin="0,0,0,201">
		<MediaElement x:Name="mp" Margin="0,-42,0,-240" Source="http://www.paulyanez.com/interactive/blog/HD/darkknight.wmv" />
		<local:hulu_player Height="32" Margin="0,0,0,-199" VerticalAlignment="Bottom"/>
	</Grid>
</UserControl>

C# code

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}