Cool Media Player with Silverlight
2.36/5 (10 votes)
Demo Media player
Introduction
This article discusses about using MediaElement to play a multimedia file in Silverlight. It has a simple button, example: play, pause, replay, slide time, fullscreen, mute, unmute and slide volume.
Using the Code
C#
namespace MediaPlayer
{
[ScriptableType]
public partial class Page : UserControl
{
private DispatcherTimer timer;
private bool isSliderTimeLock{ get; set;}
private double currentMediaVolume;
private double old_Height;
private double old_Width;
private double old_MediaHeight;
private double old_MediaWidth;
private System.Windows.Interop.SilverlightHost host;
public Page(string source, bool autoPlay)
{
InitializeComponent();
#region Kiem tra file input la video hay audio de goi
giao dien player phu hop
string[] strings = source.Split('.');
int count = strings.Length - 1;
if ((strings[count].StartsWith("wma")) || (strings[count].StartsWith("mp3")))
{
VisualStateManager.GoToState(this, "Audio", true);
}
else
{
VisualStateManager.GoToState(this, "Video", true);
}
mePlayer.Source = new Uri(source, UriKind.Relative);
mePlayer.AutoPlay = autoPlay;
#endregion
Loaded += new RoutedEventHandler(Page_Loaded);
}
void Page_Loaded(object sender, RoutedEventArgs e)
{
isSliderTimeLock = false;
sliderVolume.Value = 1;
btnReplay.Opacity = 0.3;
old_Width = this.Width;
old_Height = this.Height;
old_MediaWidth = mePlayer.Width;
old_MediaHeight = mePlayer.Height;
host = Application.Current.Host;
host.Content.IsFullScreen = true;
HtmlPage.RegisterScriptableObject("mediaPlayer", this);
btnPlay.Checked += new RoutedEventHandler(btnPlay_Checked);
btnPlay.Unchecked += new RoutedEventHandler(btnPlay_Unchecked);
mePlayer.CurrentStateChanged += new RoutedEventHandler
(mePlayer_CurrentStateChanged);
//Event MouseLeftButtonDonw and MouseLefButtonUp of
//Slider is no longer available in beta 2 --> that's messed
//sliderTime.MouseLeftButtonDown += new MouseButtonEventHandler
//(sliderTime_MouseLeftButtonDown);
//sliderTime.MouseLeftButtonUp += new MouseButtonEventHandler
//(sliderTime_MouseLeftButtonUp);
sliderTime.ThumbDragStarted += new EventHandler<EventArgs>
(sliderTime_ThumbDragStarted);
sliderTime.ThumbDragCompleted += new EventHandler<EventArgs>
(sliderTime_ThumbDragCompleted);
sliderVolume.ValueChanged += new RoutedPropertyChangedEventHandler
<double>(sliderVolume_ValueChanged);
btnReplay.Click += new RoutedEventHandler(btnReplay_Click);
btnMute.Checked += new RoutedEventHandler(btnMute_Checked);
btnMute.Unchecked += new RoutedEventHandler(btnMute_Unchecked);
btnFull.Click += new RoutedEventHandler(btnFull_Click);
btnFullScreen.Click += new RoutedEventHandler(btnFullScreen_Click);
host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
mePlayer.MediaEnded += new RoutedEventHandler(mePlayer_MediaEnded);
timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromMilliseconds(50);
timer.Tick += new EventHandler(timer_Tick);
}
void Content_FullScreenChanged(object sender, EventArgs e)
{
if (host.Content.IsFullScreen)
{
userControl.Width = Application.Current.Host.Content.ActualWidth;
userControl.Height = Application.Current.Host.Content.ActualHeight;
mePlayer.Width = Application.Current.Host.Content.ActualWidth;
mePlayer.Height = Application.Current.Host.Content.ActualHeight;
}
else
{
userControl.Width = old_Width;
userControl.Height = old_Height;
mePlayer.Width = old_MediaWidth;
mePlayer.Height = old_MediaHeight;
}
}
void btnFullScreen_Click(object sender, RoutedEventArgs e)
{
Application.Current.Host.Content.IsFullScreen =
!Application.Current.Host.Content.IsFullScreen;
}
void btnFull_Click(object sender, RoutedEventArgs e)
{
if(btnFull.Content.Equals("Audio"))
{
VisualStateManager.GoToState(this, "Audio", true);
btnFull.Content = "Video";
}
else
{
VisualStateManager.GoToState(this, "Video", true);
btnFull.Content = "Audio";
}
}
void btnMute_Unchecked(object sender, RoutedEventArgs e)
{
mePlayer.Volume = currentMediaVolume;
btnMute.Content = "Mute";
}
void btnMute_Checked(object sender, RoutedEventArgs e)
{
btnMute.Content = "Unmute";
currentMediaVolume = mePlayer.Volume;
mePlayer.Volume = 0;
}
void btnReplay_Click(object sender, RoutedEventArgs e)
{
if (btnReplay.Opacity.Equals(1))
{
mePlayer.Position = TimeSpan.FromMilliseconds(0);
mePlayer.Play();
}
}
void sliderVolume_ValueChanged(object sender,
RoutedPropertyChangedEventArgs<double> e)
{
mePlayer.Volume = sliderVolume.Value;
}
void sliderTime_ThumbDragCompleted(object sender, EventArgs e)
{
//tbTime.Text = "mouse up" + isSliderTimeLock.ToString();
isSliderTimeLock = false;
mePlayer.Position = TimeSpan.FromMilliseconds
(mePlayer.NaturalDuration.TimeSpan.TotalMilliseconds * sliderTime.Value);
}
void sliderTime_ThumbDragStarted(object sender, EventArgs e)
{
isSliderTimeLock = true;
}
void mePlayer_MediaEnded(object sender, RoutedEventArgs e)
{
mePlayer.Position = TimeSpan.FromMilliseconds(0);
sliderTime.Value = 0;
btnPlay.IsChecked = false;
//btnPlay_Unchecked(sender, e);
btnReplay.Opacity = 1;
}
void mePlayer_CurrentStateChanged(object sender, RoutedEventArgs e)
{
if(mePlayer.CurrentState == MediaElementState.Playing)
{
timer.Start();
}
else
{
timer.Stop();
}
}
void timer_Tick(object sender, EventArgs e)
{
if((mePlayer.NaturalDuration.TimeSpan.TotalSeconds > 0) &&
(isSliderTimeLock == false))
{
//tbTime.Text = string.Format("{0:00}:{1:00}",
//mePlayer.Position.Minutes, mePlayer.Position.Seconds)+
//"/"+mePlayer.NaturalDuration.TimeSpan.TotalSeconds.ToString();
tbTime.Text = string.Format("{0:00}:{1:00}",
mePlayer.Position.Minutes, mePlayer.Position.Seconds);
sliderTime.Value = mePlayer.Position.TotalSeconds/
mePlayer.NaturalDuration.TimeSpan.TotalSeconds;
}
}
void btnPlay_Unchecked(object sender, RoutedEventArgs e)
{
mePlayer.Pause();
btnPlay.Content = "Play";
}
void btnPlay_Checked(object sender, RoutedEventArgs e)
{
mePlayer.Play();
btnPlay.Content = "Pause";
}
#region Method for interacting with javascript (API)
[ScriptableMember]
public double getDoubleValue()
{
return (double)43;
}
[ScriptableMember]
public void FullScreen()
{
userControl.Width = Application.Current.Host.Content.ActualWidth;
userControl.Height = Application.Current.Host.Content.ActualHeight;
mePlayer.Width = Application.Current.Host.Content.ActualWidth;
mePlayer.Height = Application.Current.Host.Content.ActualHeight;
}
[ScriptableMember]
public void Pause()
{
btnPlay.Content = "Play";
btnPlay.IsChecked = true;
mePlayer.Pause();
}
[ScriptableMember]
public void Play()
{
btnPlay.Content = "Pause";
btnPlay.IsChecked = false;
mePlayer.Play();
}
[ScriptableMember]
public void Stop()
{
btnPlay.Content = "Play";
btnPlay.IsChecked = true;
mePlayer.Stop();
sliderTime.Value = 0;
}
[ScriptableMember]
public void Volume(double vol)
{
mePlayer.Volume = vol;
sliderVolume.Value = vol;
}
[ScriptableMember]
public void Seek(double pos)
{
if ((mePlayer.NaturalDuration.TimeSpan.TotalSeconds > pos) && (pos >= 0))
{
mePlayer.Position = TimeSpan.FromSeconds(pos);
sliderTime.Value =
mePlayer.Position.TotalSeconds /
mePlayer.NaturalDuration.TimeSpan.TotalSeconds;
}
}
[ScriptableMember]
public void LoadSource(string url)
{
//Stop();
mePlayer.Source = new Uri(url, UriKind.Relative);
}
#endregion
}
public class CustomSlider:System.Windows.Controls.Slider
{
public CustomSlider():base()
{
DefaultStyleKey = typeof (CustomSlider);
}
/// <summary>
/// Thrown when the thumb has been clicked, and dragging is initiated
/// </summary>
public event EventHandler<EventArgs> ThumbDragStarted;
/// <summary>
/// Thrown when the thumb has been released
/// </summary>
public event EventHandler<EventArgs> ThumbDragCompleted;
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
//Set up drag event handlers
Thumb thumb = this.GetTemplateChild("HorizontalThumb") as Thumb;
if (thumb != null)
{
thumb.DragStarted += new DragStartedEventHandler(thumb_DragStarted);
thumb.DragCompleted += new DragCompletedEventHandler(thumb_DragCompleted);
}
}
void thumb_DragCompleted(object sender, DragCompletedEventArgs e)
{
OnThumbDragCompleted(this, new EventArgs());
}
void thumb_DragStarted(object sender, DragStartedEventArgs e)
{
OnThumbDragStarted(this, new EventArgs());
}
public virtual void OnThumbDragStarted(object sender, EventArgs e)
{
if (ThumbDragStarted != null)
ThumbDragStarted(sender, e);
}
protected virtual void OnThumbDragCompleted(object sender, EventArgs e)
{
if (ThumbDragCompleted != null)
ThumbDragCompleted(sender, e);
}
}
}
Points of Interest
I'm very surprised at Slider in Silverlight beta 2, it have MouseLeftButtonUp and MouseLeftButtonDown events, but these don't work. I have to inherit Slider class and code the above event by hand.
History
- 7th September, 2008: Initial post