Paul Yanez » mediaelement

Building a Download Progress Bar for your Hulu inspired SilverLight video player

admin — Sat, 14 Nov 2009 18:16:49 +0000

This is part 4 in our series of building a Hulu inspired video player. In this tutorial we will be building a download progress bar.

We will take the design of our download progress bar and set it’s width equal to the position of the video’s DownloadProgress property. To make this auto-update we will hook into the ‘DownloadProgressChanged’ event.

1- Place a rectangle on the stage, on a layer below the progress bar
2- Set the rectangle’s HorizontalAlignment to Left
2- Set the rectangle’s color to white and its alpha to 20%
3- On the DownloadProgressChanged event of the mediaElement we will execute code

The end result in code is: loadProgressBar.Width = mp.DownloadProgress * bar.ActualWidth;

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

XAML code

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 MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void downloadProgressHandler(object sender, System.Windows.RoutedEventArgs e)
		{
			loadProgressBar.Width = mp.DownloadProgress * bar.ActualWidth;
		}
	}
}

Building a Progress Bar for your Hulu inspired SilverLight video player

admin — Fri, 13 Nov 2009 12:32:13 +0000

This is part 3 in our series of building a Hulu inspired video player. In this tutorial we will be building a progress bar.

We will take the design of our progress bar and set it’s width equal to the position of the video’s current position. To make this dynamic and without needing to write any code we will use the concept of Binding.

You can view a video on Databinding here
1- Place a rectangle on the stage
2- Set the rectangle’s HorizontalAlignment to Left
2- Set the rectangle’s color to white and its alpha to 20%
3- Bind the width property of the rectangle to the Position.TotalSeconds of the mediaElement

In design view
Select the rectangle
Click the yellow box next to the width property.
Select ‘Databinding’
Select the ‘Element Property’ tab
In the “Scene Elements’ list, select the mediaElement control
In the properties list select ‘Position / TotalSeconds’

The end result in XAML is: Width=”{Binding Position.TotalSeconds, ElementName=mp, Mode=OneWay}”

XAML code

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();
		}

	}
}

Loading external video into your Hulu inspired Silverlight video player

admin — Wed, 11 Nov 2009 12:47:41 +0000

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.

You can play and pause the video

XAML code

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();
		}

	}
}

Building a Play-Pause control for a Hulu inspired SilverLight video player

admin — Tue, 10 Nov 2009 05:26:34 +0000

The following example is the Part 1 in a series of tutorials demonstrating how to build a Hulu inspired video player in Silverlight 3. This tutorial shows how to create a play-pause button control utilizing the ToggleButton control.

1- Place a ToggleButton on the stage
2- Right click and select “Edit Template / Edit a copy”
3- Name your control
4- Delete everything in the component – FocusVisualElement, DisabledVisualElement, contentPresenter and the Background. Do not delete the top level Grid.
5- In the states panel add designs for the Normal, MouseOver and Pressed states.
6- Add the Pause icon to the Unchecked CheckStates and the Play icon to the Checked CheckState.
7- Add a MediaElement control and set it’s source.
8- On your custom control add the code to pause and play the video on the Checked and UnChecked events.

You can play and pause the video

XAML code

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();
		}

	}
}

Dynamically creating thumbnails with WriteableBitmap and DispatcherTimer in Silverlight 3

admin — Sat, 07 Nov 2009 20:43:13 +0000

In the previous example “Creating thumbnails of video frames with WriteableBitmap in Microsoft Expression Blend 3″ the user was able to create thumbnails by clicking on the video display.

The following example shows how thumbnails could be dynamically created by using DispatcherTimer thereby eliminating the need to click.

To stop the timer from firing, I simply hooked into the MediaElement mediaEnded event.

XAML code

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;
using System.Windows.Media.Imaging;

namespace ImageSnapshot
{
	public partial class MainPage : UserControl
	{
		System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();

		public MainPage()
		{
			InitializeComponent();

            myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500);
            myDispatcherTimer.Tick += new EventHandler(takeSnapShot);
            myDispatcherTimer.Start();
		}
		private void takeSnapShot(object o, EventArgs sender)
		{
			WriteableBitmap snapShot = new WriteableBitmap(myMediaElement, null);

			Image image = new Image();
			image.Height = 89;
			image.Margin = new Thickness(10);
			image.Source = snapShot;

			thumbs.Children.Add(image);
			scroller.UpdateLayout();
			double scrollPos = thumbs.ActualWidth;
			scroller.ScrollToHorizontalOffset(scrollPos);
		}

		private void stopTimer(object sender, System.Windows.RoutedEventArgs e)
		{
			myDispatcherTimer.Stop();
		}
	}
}