Scrubber for Video playback
Last post 05-06-2008 6:51 PM by gwphillipson. 7 replies.
Next »
« Previous |
Sort Posts:
05-02-2008 3:01 AM
Scrubber for Video playback
   Reply    Contact

Hi

Has anyone got any code in c# that will display a scrubber/progress bar when a video is playing, as i cannot find any examples for Silverlight 2 beta 1

Thanks in advance

George

My code is below

------------------------------------------------------

using System;

using System.Collections.Generic;

using System.Linq;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Interop;

using System.Windows.Browser;

using System.Net;

using System.Windows.Resources;

using System.Windows.Media.Imaging;

using System.IO;

namespace Forum

{

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

FullScreenMode.MouseLeftButtonDown += new MouseButtonEventHandler(FullScreenMode_MouseLeftButtonDown);

App.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);

PlayMedia.Source = new Uri("http://localhost:1969/Forum_Web/MemberMedia/WinVideo-YetAnotherCarousel.wmv", UriKind.RelativeOrAbsolute);PlayMediaFS.Source = new Uri("http://localhost:1969/Forum_Web/MemberMedia/WinVideo-YetAnotherCarousel.wmv", UriKind.RelativeOrAbsolute);

}

 

void FullScreenMode_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

App.Current.Host.Content.IsFullScreen = App.Current.Host.Content.IsFullScreen ? false : true;

}

void Content_FullScreenChanged(object sender, EventArgs e)

{

if (App.Current.Host.Content.IsFullScreen)

{

double targetWidth = (double)App.Current.Host.Content.ActualWidth;double targetHeight = (double)App.Current.Host.Content.ActualHeight;

Width = targetWidth;

Height = targetHeight;

PlayMediaFS.Width = targetWidth;

PlayMediaFS.Height = targetHeight;

PlayMediaFS.Visibility = Visibility.Visible;

PlayMedia.Visibility = Visibility.Collapsed;

MediaCase.Visibility = Visibility.Collapsed;

MediaBackground.Visibility = Visibility.Collapsed;

//ButtonGroup.Visibility = Visibility.Collapsed;

mediaStateTextBlock.Visibility = Visibility.Collapsed;

}

else

{

PlayMediaFS.Visibility = Visibility.Collapsed;

PlayMedia.Visibility = Visibility.Visible;

MediaCase.Visibility = Visibility.Visible;

MediaBackground.Visibility = Visibility.Visible;

//ButtonGroup.Visibility = Visibility.Visible;

mediaStateTextBlock.Visibility = Visibility.Visible;

 

}

}

//void DownloadImagePart(string imgPart)

//{

// WebClient wc = new WebClient();

// wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);

// wc.DownloadProgressChanged += new DownloadProgressChangedEventHandler(wc_DownloadProgressChanged);

// wc.OpenReadAsync(new Uri("http://localhost:1969/Forum_Web/MemberMedia/WinVideo-YetAnotherCarousel.wmv", UriKind.Relative), imgPart);

//}

//void wc_DownloadProgressChanged(object sender, DownloadProgressChangedEventArgs e)

//{

// // Calculate the downloaded percentage.

// // Update the Rectangle and TextBlock objects of the visual progress indicator.

// progressText.Text = e.ProgressPercentage.ToString();

// progressRectangle.Width = (double)e.ProgressPercentage;

//}

 

 

public void Media_Play(object sender, MouseButtonEventArgs e)

{

PlayMedia.Play();

}

public void Media_Stop(object sender, MouseButtonEventArgs e)

{

PlayMedia.Stop();

}

public void Media_Pause(object sender, MouseButtonEventArgs e)

{

PlayMedia.Pause();

}

 

public void Media_State_Changed(object sender, EventArgs e)

{

mediaStateTextBlock.Text = " Video: " + " " + PlayMedia.CurrentState.ToString();

}

 

}

}

 

---------------------------------------------------------

<UserControl x:Class="Forum.Page"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="324" Height="308"

x:Name="RealEstate">

<Canvas x:Name="LayoutRoot" Background="White">

<MediaElement x:Name="PlayMediaFS"

Width="298"

Height="223"

AutoPlay="True"

Stretch="Fill">

</MediaElement>

<Rectangle x:Name="MediaBackground"

Canvas.Left="0"

Canvas.Top="0"

Width="324"

Height="308"

Fill="#E6E6E6"

Stroke="#C0C0C0"

StrokeThickness="3"

RadiusX="5"

RadiusY="5">

</Rectangle>

<Canvas x:Name="MediaCase"

Canvas.Left="14"

Canvas.Top="11"

Width="298"

Background="Black"

Height="223">

 

<MediaElement x:Name="PlayMedia"

Width="298"

Height="223"

AutoPlay="False"

CurrentStateChanged="Media_State_Changed"

 

Stretch="Fill">

</MediaElement>

</Canvas>

<!--<StackPanel Height="48.439"

Width="300"

Canvas.Left="10"

Canvas.Top="240"

x:Name="ButtonGroup"

Orientation="Horizontal">

-->

 

<!-- Play media. -->

<Button x:Name="mPlay"

MouseLeftButtonDown="Media_Play"

Canvas.Left="10"

Canvas.Top="240"

Width="50"

Height="30"

Content="Play"

Cursor="Hand"

ToolTip="Play"

FontSize="13"

/>

<!-- Pauses media playback. -->

<Button x:Name="mPause"

MouseLeftButtonDown="Media_Pause"

Canvas.Left="70"

Canvas.Top="240"

Width="50"

Height="30"

Content="Pause"

Cursor="Hand"

ToolTip="Pause"

FontSize="13"

/>

<!-- Stops media playback.-->

<Button x:Name="mStop"

MouseLeftButtonDown="Media_Stop"

Canvas.Left="130"

Canvas.Top="240"

Width="50"

Height="30"

Content="Stop"

Cursor="Hand"

ToolTip="Stop"

FontSize="13"

/>

<!--Full Screen-->

<Button x:Name="FullScreenMode"

Canvas.Left="190"

Canvas.Top="240"

Width="80"

Height="30"

Content="Full Screen"

Cursor="Hand"

ToolTip="Full Screen"

FontSize="13"

/>

<!-- </StackPanel>-->

<!-- Play media. -->

<!-- Pauses media playback. -->

<!-- Stops media playback.-->

 

<!--Full Screen-->

<TextBlock x:Name="mediaStateTextBlock"

Canvas.Top="280"

Canvas.Left="10"

FontSize="12"/>

</Canvas>

 

</UserControl>

gwphillipson

Joined on 04-25-2008
Posts 19
05-05-2008 1:27 AM
Re: Scrubber for Video playback
   Reply    Contact

Hi:

  You can use Slider control and change MediaElement.Position in it's MouseLeftButtonDown event handler. You may also use a DispatcherTimer to update the value of the Silder.

Regards

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Allen Chen – MSFT

Joined on 03-16-2007
Posts 717
05-05-2008 5:43 PM
Re: Scrubber for Video playback
   Reply    Contact

Hi Allen

Do you have any code examples in c# that i can view.

Thanks

George

gwphillipson

Joined on 04-25-2008
Posts 19
05-05-2008 6:56 PM
Re: Scrubber for Video playback
   Reply    Contact

Hi Allen

Could you please take a look at this code and see if you can find why the slider is not working, i get no errors.

 

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Browser;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Interop;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Media.Imaging;

using System.Windows.Resources;

using System.Windows.Shapes;

using System.Windows.Threading;

namespace Forum

{

public partial class Page : UserControl

{

private DispatcherTimer timer;public Page()

{

InitializeComponent();

FullScreenMode.MouseLeftButtonDown += new MouseButtonEventHandler(FullScreenMode_MouseLeftButtonDown);

App.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);

PlayMedia.Source = new Uri("http://localhost:1969/Forum_Web/MemberMedia/GoldenCompass_TSR1_Med_dl.wmv", UriKind.RelativeOrAbsolute);

//PlayMediaFS.Source = new Uri("http://localhost:1969/Forum_Web/MemberMedia/GoldenCompass_TSR1_Med_dl.wmv", UriKind.RelativeOrAbsolute);

timer = new DispatcherTimer();

timer.Tick += new EventHandler(timer_Tick);

timer.Interval = TimeSpan.FromMilliseconds(100);

 

}

 

 

void FullScreenMode_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

App.Current.Host.Content.IsFullScreen = App.Current.Host.Content.IsFullScreen ? false : true;

}

void Content_FullScreenChanged(object sender, EventArgs e)

{

if (App.Current.Host.Content.IsFullScreen)

{

double targetWidth = (double)App.Current.Host.Content.ActualWidth;double targetHeight = (double)App.Current.Host.Content.ActualHeight;

Width = targetWidth;

Height = targetHeight;

//PlayMediaFS.Width = targetWidth;

//PlayMediaFS.Height = targetHeight;

//PlayMediaFS.Visibility = Visibility.Visible;

PlayMedia.Visibility = Visibility.Collapsed;

MediaCase.Visibility = Visibility.Collapsed;

MediaBackground.Visibility = Visibility.Collapsed;

//ButtonGroup.Visibility = Visibility.Collapsed;

mediaStateTextBlock.Visibility = Visibility.Collapsed;

}

else

{

//PlayMediaFS.Visibility = Visibility.Collapsed;

PlayMedia.Visibility = Visibility.Visible;

MediaCase.Visibility = Visibility.Visible;

MediaBackground.Visibility = Visibility.Visible;

//ButtonGroup.Visibility = Visibility.Visible;

mediaStateTextBlock.Visibility = Visibility.Visible;

}

}

 

 

private void PlayMedia_MediaOpened(object sender, RoutedEventArgs e)

{

MediaSlider.Maximum = PlayMedia.NaturalDuration.TimeSpan.TotalSeconds;

MediaSlider.Value = 0;

}

private void timer_Tick(object sender, EventArgs e)

{

MediaSlider.Value = PlayMedia.Position.TotalSeconds;

}

private void PlayMedia_CurrentStateChanged(object sender, RoutedEventArgs e)

{

if (PlayMedia.CurrentState == MediaElementState.Playing)

{

timer.Start();

}

else

{

timer.Stop();

}

}

private bool changedByUser;private void MediaSlider_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

changedByUser = true;

timer.Stop();

}

private void MediaSlider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

if (changedByUser && PlayMedia.CurrentState == MediaElementState.Playing)

{

PlayMedia.Position = TimeSpan.FromSeconds(MediaSlider.Value);

timer.Start();

changedByUser = false;

}

}

 

 

 

 

 

 

 

 

 

 

 

 

public void Media_Play(object sender, MouseButtonEventArgs e)

{

PlayMedia.Play();

}

public void Media_Stop(object sender, MouseButtonEventArgs e)

{

PlayMedia.Stop();

}

public void Media_Pause(object sender, MouseButtonEventArgs e)

{

PlayMedia.Pause();

}

 

public void Media_State_Changed(object sender, EventArgs e)

{

mediaStateTextBlock.Text = " Video: " + " " + PlayMedia.CurrentState.ToString();

}

 

}

}

 

--------------------------------------------------------------------------

 

<UserControl x:Class="Forum.Page"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="324" Height="308"

x:Name="RealEstate">

<Canvas x:Name="LayoutRoot" Background="White">

<!--<MediaElement x:Name="PlayMediaFS"

Width="298"

Height="223"

AutoPlay="True"

Stretch="Fill">

</MediaElement>

-->

<Rectangle x:Name="MediaBackground"

Canvas.Left="0"

Canvas.Top="0"

Width="324"

Height="308"

Fill="#E6E6E6"

Stroke="#C0C0C0"

StrokeThickness="3"

RadiusX="5"

RadiusY="5">

</Rectangle>

<Canvas x:Name="MediaCase"

Canvas.Left="14"

Canvas.Top="11"

Width="298"

Background="Black"

Height="223">

 

<MediaElement x:Name="PlayMedia"

Width="298"

Height="223"

AutoPlay="False"

CurrentStateChanged="Media_State_Changed"

 

Stretch="Fill">

</MediaElement>

</Canvas>

<!--<StackPanel Height="48.439"

Width="300"

Canvas.Left="10"

Canvas.Top="240"

x:Name="ButtonGroup"

Orientation="Horizontal">

-->

 

<!-- Play media. -->

<Button x:Name="mPlay"

MouseLeftButtonDown="Media_Play"

Canvas.Left="10"

Canvas.Top="240"

Width="50"

Height="30"

Content="Play"

Cursor="Hand"

ToolTip="Play"

FontSize="13"

/>

<!-- Pauses media playback. -->

<Button x:Name="mPause"

MouseLeftButtonDown="Media_Pause"

Canvas.Left="70"

Canvas.Top="240"

Width="50"

Height="30"

Content="Pause"

Cursor="Hand"

ToolTip="Pause"

FontSize="13"

/>

<!-- Stops media playback.-->

<Button x:Name="mStop"

MouseLeftButtonDown="Media_Stop"

Canvas.Left="130"

Canvas.Top="240"

Width="50"

Height="30"

Content="Stop"

Cursor="Hand"

ToolTip="Stop"

FontSize="13"

/>

<!--Full Screen-->

<Button x:Name="FullScreenMode"

Canvas.Left="190"

Canvas.Top="240"

Width="80"

Height="30"

Content="Full Screen"

Cursor="Hand"

ToolTip="Full Screen"

FontSize="13"

/>

<Slider x:Name="MediaSlider"

Canvas.Top="275"

Width="200"

Height="3"

Canvas.Left="10"

Visibility="Visible">

</Slider>

 

<!--Full Screen-->

<TextBlock x:Name="mediaStateTextBlock"

Canvas.Top="290"

Canvas.Left="10"

FontSize="12"/>

</Canvas>

 

</UserControl>

gwphillipson

Joined on 04-25-2008
Posts 19
05-05-2008 9:51 PM
Re: Scrubber for Video playback
   Reply    Contact

Hi:

  Do you mean if the video ends you cannot play it anymore via the sliderbar? If so please try this:

 private void MediaSlider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {

            if (changedByUser)
            {

                PlayMedia.Position = TimeSpan.FromSeconds(MediaSlider.Value);
                PlayMedia.Play();
                timer.Start();

                changedByUser = false;
            }

        }

  Your other code seems fine on my side.

Regards

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Allen Chen – MSFT

Joined on 03-16-2007
Posts 717
05-06-2008 3:09 AM
Re: Scrubber for Video playback
   Reply    Contact

Hi Allen

No, my slider does not move at all when the video is playing, no idea why!

George

gwphillipson

Joined on 04-25-2008
Posts 19
05-06-2008 3:25 AM
Marked as Answer
Re: Scrubber for Video playback
   Reply    Contact

Hi:

  Here's my test code, which works fine:

<MediaElement AutoPlay="False" MediaOpened="PlayMedia_MediaOpened" CurrentStateChanged="PlayMedia_CurrentStateChanged" x:Name="PlayMedia" Width="400" Height="300" Source="Bear.wmv"></MediaElement>
           
       <Slider MouseLeftButtonDown="MediaSlider_MouseLeftButtonDown" MouseLeftButtonUp="MediaSlider_MouseLeftButtonUp" x:Name="MediaSlider" Width="400" Height="50"></Slider>


            <Button Click="Button_Click"></Button>

private DispatcherTimer timer = new DispatcherTimer();

  public Page()
        {

            InitializeComponent();
            timer.Tick += new EventHandler(timer_Tick);

            timer.Interval = TimeSpan.FromMilliseconds(100); 
            
                  
        }

        private void timer_Tick(object sender, EventArgs e)
        {

            MediaSlider.Value = PlayMedia.Position.TotalSeconds;

        }
        private void PlayMedia_CurrentStateChanged(object sender, RoutedEventArgs e)
        {

            if (PlayMedia.CurrentState == MediaElementState.Playing)
            {

                timer.Start();

            }

            else
            {

                timer.Stop();

            }

        }
        private void PlayMedia_MediaOpened(object sender, RoutedEventArgs e)
        {

            MediaSlider.Maximum = PlayMedia.NaturalDuration.TimeSpan.TotalSeconds;

            MediaSlider.Value = 0;

        }
        private bool changedByUser;
        private void MediaSlider_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {

            changedByUser = true;
            timer.Stop();

        }

        private void MediaSlider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {

            if (changedByUser)
            {

                PlayMedia.Position = TimeSpan.FromSeconds(MediaSlider.Value);
                PlayMedia.Play();
                timer.Start();

                changedByUser = false;
            }

        }

  private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.PlayMedia.Play();

        }

Regards

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Allen Chen – MSFT

Joined on 03-16-2007
Posts 717
05-06-2008 6:51 PM
Re: Scrubber for Video playback
   Reply    Contact

Hi Allen

Thanks, that worked a treat

George

gwphillipson

Joined on 04-25-2008
Posts 19