I am working on a video project. In that project there will be a video playing for the user, and if the user clicks a button- that video is changed to the next one. Point is, the next video will play from the point the previous one stopped in (So if the user presses the NEXT button at 00:00:30 the next video will play from that point).
The problem I am facing is that there are always a few moments of black screen until the next video will play, and I want the change to be smooth without the user watching a black screen for a second or two.
So far, I've tried to solve it with one mediaElement and with two mediaElements:
The single mediaElement change code:
TimeSpan Time = mediaElement1.Position;
mediaElement1.Source = new Uri("NEXT VIDEO LOCATION");
mediaElement1.Position = Time;
mediaElement1.Play();
Two mediaElements code:
TimeSpan Time = mediaElement1.Position;
mediaElement2.Source = new Uri("NEXT VIDEO LOCATION");
mediaElement2.Position = Time;
mediaElement1.Visibility = Visibility.Hidden;
mediaElement1.Source = null;
mediaElement2.Visibility = Visibility.Visible;
mediaElement2.Play();
At both tries there is no smooth switch between the videos. Thanks in advance for any light on that matter.
Sorry if I was not as clear as I would. In fact the MediaElement has the Position property but it is not a DependancyProperty and is not Bindable. There is also no way to retrieve the updated position with an event directly. So the way I used long time ago was the use of the MediaTimeLine in a StoryBoard. You should take a look on this post How to: Control a MediaElement by Using a Storyboard from Microsoft.
I used this way to seek in a video file using a MediaElement. The other way was the use of a third party library named WPFMediaKit which is very useful. You can find it there
WPF MediaKit - For webcam, DVD and custom video support in WPF
FIRST EXAMPLE : Using WPFMediaKit (no actual way to play MP4 files...)
The MediaUriElement in the WPF MediaKit allows you to bind its MediaPosition because it is a DependancyProperty. The MediaUriElement is a wrapper around the .Net MediaElement which is poor in functionnalities. So, refering to my first answer, I write a very simple POCO. You could write something like this :
MainWindow.xaml
<Window x:Class="Media.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:media="clr-namespace:WPFMediaKit.DirectShow.Controls;assembly=WPFMediaKit"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="SwitchToSecondPlayerStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="firstPlayer">
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="secondPlayer">
<DiscreteObjectKeyFrame KeyTime="0:0:0.7" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="switchButton">
<BeginStoryboard Storyboard="{StaticResource SwitchToSecondPlayerStoryboard}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<media:MediaUriElement x:Name="firstPlayer" Source="firstFile.wmv" LoadedBehavior="Play"/>
<media:MediaUriElement x:Name="secondPlayer" Source="secondFile.wmv" MediaPosition="{Binding Path=MediaPosition, ElementName=firstPlayer}" Visibility="Collapsed" Volume="0"/>
<Button Grid.Row="1" x:Name="switchButton" Content="SWITCH NEXT FILE" HorizontalAlignment="Center" VerticalAlignment="Center" Click="OnSwitchButtonClick"/>
</Grid>
And here is the MainWindow.xaml.cs
namespace Media
{
/// <summary>
/// Logique d'interaction pour MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void OnSwitchButtonClick(object sender, RoutedEventArgs e)
{
//Do whatever you want with the players.
}
}
}
This program works and there is no "blank screen" effect. You just have to improve the Storyboard transition (example with a FadeIn effect), but this is the principle.
You would also note that the MediaPosition of the second is bound to the MediaPosition of the first one.
This implies to always check that the MediaPosition is lower than the Duration of the file to avoid errors, but this is just code stuff.
Note that I simplified my code avoiding the usage of MVVM and other architecture things in order to keep it clearer.
SECOND SOLUTION : Workaround using MediaElement
MainWindow.xaml
<Window x:Class="Media.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="ShowSecond">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="firstMediaElement">
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="secondMediaElement">
<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="btnlaunchNext">
<BeginStoryboard Storyboard="{StaticResource ShowSecond}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<StackPanel Background="Black">
<MediaElement Name="firstMediaElement" LoadedBehavior="Manual" Source="firstFile.mp4" Width="260" Height="150" Stretch="Fill" />
<MediaElement Name="secondMediaElement" Volume="0" LoadedBehavior="Manual" Source="secondFile.mp4" Visibility="Collapsed" Width="260" Height="150" Stretch="Fill" />
<!-- Buttons to launch videos. -->
<Button x:Name="btnlaunch" Content="PLAY FIRST" Click="OnLaunchFirstButtonClick"/>
<Button x:Name="btnlaunchNext" Content="PLAY NEXT" Click="OnLaunchNextButtonClick"/>
</StackPanel>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Timers;
using System.Windows;
namespace Media
{
/// <summary>
/// Interaction logic for pour MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public TimeSpan Position { get; set; }
Timer _updateTimer;
public MainWindow()
{
InitializeComponent();
//Timer interval fixed to 1 second to read the actual position of the first media element
this._updateTimer = new Timer(1000);
this._updateTimer.Elapsed += this.UpdateTimerElapsed;
}
//The callback of your update timer
private void UpdateTimerElapsed(object sender, ElapsedEventArgs e)
{
//I use the dispatcher because you call the Position from another thread so it has to be synchronized
Dispatcher.Invoke(new Action(() => this.Position = firstMediaElement.Position));
}
//When stopping the first, you start the second and set its Position
private void OnLaunchNextButtonClick(object sender, RoutedEventArgs e)
{
this.firstMediaElement.Stop();
this.secondMediaElement.Volume = 10;
this.secondMediaElement.Play();
this.secondMediaElement.Position = this.Position;
}
//When you start the first, you have to start the update timer
private void OnLaunchFirstButtonClick(object sender, RoutedEventArgs e)
{
this.firstMediaElement.Play();
this._updateTimer.Start();
}
}
}
These are the only simple solutions I can provide. There are different ways to do this, particularly using MediaTimeline, but the implementation is not as easy as it seems, regarding the problem you are facing. The second example, as the first is fully compiling and running and targets what you wanted to do I think.
Hope this helps. Feel free to give me your feedback.
Is there any way to preload the next video ? If it is the case, you could try to load both sources on each MediaElement and then bind the Position of the first to the second one while playing.
The second MediaElement is Collapsed by default (preferable from Hidden regarding performance when using heavy graphical elements) and will become visible and its Source is already loaded and its Position already bound on the first MediaElement position.
Hope this helps.
Related
Anyone can help me please?
What I'm trying to do is, make a random quote fading in and out on my textblock.
I'm trying to use something called "FadeInThemeAnimation".
The thing is that I don't know how to make it work endlessly ,so that my random quote appears and disappears after the time a set up. I've tested a dozen attributes in xaml to see what happens but it seems like I have no clue what to do. At the moment the quote appears in the textblock(without any fade in effect) and slowly fades out, that is it. Please , how do I make it work. I'm pasting in a chunk of xaml code I have got.
<TextBlock x:Name="FamousQuoteTextBlock" Grid.Row="4" HorizontalAlignment="Stretch" Margin="5,5,5,5"
FontSize="15" TextAlignment="Justify" TextWrapping="Wrap" VerticalAlignment="Stretch"
Loaded="FamousQuoteTextBlock_Loaded"
FontFamily="Edwardian Script ITC"
DataContext="{Binding quote}"
Text="{Binding RandomQuote,Mode=TwoWay}"
/>
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="EnterStoryboard">
<FadeInThemeAnimation Storyboard.TargetName="FamousQuoteTextBlock"/>
</Storyboard>
<Storyboard x:Name="ExitStoryboard">
<FadeOutThemeAnimation Storyboard.TargetName="FamousQuoteTextBlock"/>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
I have tried to use something like speedratio,duratio and so on to see what happens but it didn't make any difference:(
My C# code behind:
private void FamousQuoteTextBlock_Loaded(object sender, RoutedEventArgs e)
{
Delay(sender, e);
}
private async void Delay(object sender, RoutedEventArgs e)
{
await System.Threading.Tasks.Task.Delay(TimeSpan.FromSeconds(3));
generator_Tick(this, e);
DispatcherTimer generator = new DispatcherTimer();
generator.Tick += generator_Tick;
generator.Interval = TimeSpan.FromSeconds(5);
generator.Start();
}
private void generator_Tick(object sender, object e)
{
Quote quote = new Quote();
FamousQuoteTextBlock.DataContext = quote;
quote.GenerateQuote();
}
You can create your own animation like this :
<TextBlock x:Name="QuoteTextBlock" Text="My Quote here">
<TextBlock.Resources>
<Storyboard x:Key="FadeStoryboard">
<DoubleAnimation From="1" To="0.1" Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="QuoteTextBlock"
RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation.EasingFunction>
<CubicEase/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</TextBlock.Resources>
</TextBlock>
And start it like this :
var storyboard = QuoteTextBlock.Resources["FadeStoryboard"] as Storyboard;
if (storyboard != null)
{
storyboard.Begin();
}
The small tricks you were looking for were AutoReverse which means that after the animation is performed, the reverse animation will follow up. If combined with RepeatBehaviour="Forever", it might achieve what you were looking for.
I've added an Ease. You can customize the easing function a lot. It means that the animation step won't be performed in a linear manner, but in this case will be cubic.
Some links which can provide you with more details on this matter :
MSDN : Quickstart - Animating your UI using XAML
MSDN : Storyboarded Animations
I have series of buttons with EFFECTS that I'd like simulate clicking in code. The problem is that when I run "someFunction" the effects all trigger at about the same time. I'd like a button to click, then wait for the effect to finish then proceed on to the other buttons. I've tried using Thread.sleep but that doesn't work. Can anyone give me some pointers on how this can be accomplished? Also, is it possible to simulate clicking on multiple buttons at the same time?
Thanks for any help!
someFunction() {
button1.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
//System.Threading.Thread.Sleep(100); doesn't work wait for effect to finish
button2.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
//System.Threading.Thread.Sleep(100); doesn't work
button3.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
//System.Threading.Thread.Sleep(100); doesn't work
button4.RaiseEvent(new RoutedEventArgs(Button.ClickEvent));
}
<Button Name="buttonRed" Background="Red" BorderBrush="Black" BorderThickness="1"
Grid.Row="1" Grid.Column="0" Click="buttonRedClick">
<Button.BitmapEffect>
<BlurBitmapEffect x:Name="redBlur" Radius="0" />
</Button.BitmapEffect>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="redBlur"
Storyboard.TargetProperty="Radius"
From="0" To="40" Duration="0:0:0.3"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Try looking at this article by Laurent Bugnion.
From above article:
Note that it is also possible to use the BeginTime property of the
animation object to delay an animation, for example in order to
cascade animations. Another way is to use the Completed event, which
can be set in the XAML code, or in the code-behind. This event implies
that the corresponding method must be present in the code-behind, thus
it is not applicable for pure XAML applications.
Thread.sleep will not work as it defines the sys.val realization, so you can use the following code:
there's the error : <EventTrigger RoutedEvent="Button.Click">
instead it should be: <Event.Trigger.Sleep RoutedEvent="Button.Click">
I have a block arrow and i want to make it blink by just filling it with green. I would like to be able to stop it also. I have a right click menu to start it and stop it.
This is what i have so far. But i cant figure out how to start it. I tried to access it but i got an error:
All objects added to an IDictionary must have a
Key attribute or some other type of key associated with them. Line 11 Position 10.
Here is my xaml code:
<ed:BlockArrow x:Name="ArrowLeft" Fill="Green" HorizontalAlignment="Left" Height="29" Margin="142,0,0,-3" Orientation="Left" Stroke="#FF13FF00" VerticalAlignment="Bottom" Width="39" />
<Window.Resources>
<Storyboard x:Name="Blink" AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="ArrowLeft"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:01" Value="Green"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
So, in the right click menu to start it i have:
private void MenuItemLeft_Click(object sender, RoutedEventArgs e)
{
Storyboard blinkAnimation = TryFindResource("Blink") as Storyboard;
if (blinkAnimation != null)
{
blinkAnimation.Begin();
}
Is there a better way to do this? or what am i doing wrong?
WPF Resources are dictrionaries, hence everything within a Resource must have a key. You can add a key by adding an x:Key attribute. You can then locate your item by indexing into the Resource dictionary directly, Resources["MyKeyName"]
Regarding your method of implementation, it looks fine to me.
I have a wpf progress window defined as following:
<Window x:Class="NeoinfoXmlEditor.WPF.Forms.ProgressDisplayForm"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="84" Width="505" x:Name="root" WindowStartupLocation="CenterScreen">
<Grid>
<ProgressBar Height="15" x:Name="MessageProgessBar" HorizontalAlignment="Stretch" VerticalAlignment="Top" Maximum="10000" Margin="10,2,10,2" >
<ProgressBar.Triggers>
<EventTrigger RoutedEvent="ProgressBar.Loaded">
<BeginStoryboard>
<Storyboard x:Name="sb">
<DoubleAnimation Storyboard.TargetName="MessageProgessBar"
Storyboard.TargetProperty="Value"
From="0" To="10000" Duration="0:0:45"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ProgressBar.Triggers>
</ProgressBar>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5" Text="{Binding ElementName=root, Path=Message}" />
</Grid>
</Window>
And a code behind file as follows:
public partial class ProgressDisplayForm : Window
{
public static readonly DependencyProperty MessageProperty =
DependencyProperty.Register("Message", typeof (string), typeof (ProgressDisplayForm));
public string Message
{
get { return (string) GetValue(MessageProperty); }
set { SetValue(MessageProperty, value); }
}
public ProgressDisplayForm()
{
InitializeComponent();
}
public void DisplayWindow()
{
this.Show();
this.BeginStoryboard(sb);
}
}
You can see that I try to start a progressBar animation in two ways:
-using EventTrigger, on ProgressBar.Loaded
-from code behind, explicitely
The problem is - neither works.
Note - I need to open this window and start animation as modalless window, so ShowDialog() is not na option. Also, I tried using DispatcherTimer, but it somehow doesn't work, niether the this.Dispatcher.Invoke() while using System.Timers.Timer class.
I'm calling the DisplayWindow() method from the main app window.
What am I missing?
Thanks in advance
I couldn't reproduce your problem, your XAML animation is working just fine!, try to copy your XAML code to a new project without the code-behind. I tried that and worked just fine :D
I found out what the problem was - i called NewWindow.Show(), and then continued with some high CPU computing, assuming that the new window will be on separate thread if not called with ShowDialog().
I fixed it using BackgroundWorker!
Thanks for help anyways!
I know this sounds silly and I could use some out-of-the-box solution, but I really want to build my own simple image slideshow. I've been doing application development in Silverlight/WPF for some time, but for whatever reason I can't wrap my head around this.
I have an observable collection of SlideshowItem
Each SlideshowItem has Source which indicates where the image for it is located
I show a translucent box for each SlideshowItem (horizontal list using a stackpanel) and when you click, you should transition to that slide
So here's my problem: If I have that list with a stackpanel template, and under the list is an image taking up the size of the canvas, I can bind the context of the image to the selected SlideshowItem. That's all well and good. But when I click/change the selected index of the list, I want to do a crossfade or slide between two images.
How should I represent this in Silverlight? Should I actually have a scroll panel or something with all the images and then change between them? Or is it sufficient to use a single image control? Can I do this with states, or do I need to explicitly run a storyboard? Any samples would be appreciated.
You can use the TransitioningContentControl from the Silverlight Toolkit, however if you want to roll your own you will need two content controls and swap out the "Active" one on SelectionChanged events. You also can fire your storyboards here.
ContentControl _active;
private void LB_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (_active == Content1)
{
_active = Content2;
Content2Active.Begin();
} else
{
_active = Content1;
Content1Active.Begin();
}
_active.Content = LB.SelectedItem;
}
And the Xaml looks something like this. I just use strings and text, but this approach should work reasonable well for images too:
<Grid x:Name="LayoutRoot" Background="White" MaxHeight="200">
<Grid.Resources>
<Storyboard x:Name="Content1Active">
<DoubleAnimation From="0" To="1" Storyboard.TargetName="Content1" Storyboard.TargetProperty="(UIElement.Opacity)" />
<DoubleAnimation To="0" Storyboard.TargetName="Content2" Storyboard.TargetProperty="(UIElement.Opacity)" />
</Storyboard>
<Storyboard x:Name="Content2Active">
<DoubleAnimation From="0" To="1" Storyboard.TargetName="Content2" Storyboard.TargetProperty="(UIElement.Opacity)" />
<DoubleAnimation To="0" Storyboard.TargetName="Content1" Storyboard.TargetProperty="(UIElement.Opacity)" />
</Storyboard>
</Grid.Resources>
<StackPanel>
<ListBox x:Name="LB" SelectionChanged="LB_SelectionChanged" xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:String>Red</sys:String>
<sys:String>Green</sys:String>
<sys:String>Blue</sys:String>
</ListBox>
<Grid>
<ContentControl x:Name="Content1" FontSize="40" Foreground="{Binding Content, RelativeSource={RelativeSource Self}}">
</ContentControl>
<ContentControl x:Name="Content2" FontSize="40" Foreground="{Binding Content, RelativeSource={RelativeSource Self}}">
</ContentControl>
</Grid>
</StackPanel>
</Grid>
Definitely you don't need the entire Image collection displayed in a scrollviewer/stackpanel. You can implement this in many different ways. I can explain a simple idea of Using one Image : As you said , define a SelectedSlide property in your ViewModel and bind that to an Image control ( Preferably a ContentControl with Image as its part of the ContentTemplate, so that you can have descriptions and other items in the same). This solution can give you the opportunity to add some storyboards so that if you increase your SelectedIndex(Another VM property) fire a storyboard to do a 'Left Move' animation and if you decrease do a 'Right Move' animation makes user feels like slides are coming from one side and going the other way. You can do pretty good UX on that set of storyboards.
Update (Idea 2) : Yes if we need the notion of the previous one leaving the view when new one coming in, we can architect it by using two ContentControls wrapped inside a CustomControl ( lets call it as SlideShowControl). SlideShowControl will have its mechanism to properly set DataContext of the two ContentControl based on the selectedIndex position. I have successfully made this control in one of my projects, the logic here is to switch the ContentControls through a storyboard so that we can have many different effects by swapping the storyboard. Suppose you move from Index 1 to 2, ContentControlA will animate to left, and B will come in to the View, and based on your next click ControlA will go sit either left or right of the View, and comes with new DataContext of the selected View.