I want to play multiple videos in a loop one after other on a single mediaElement control. Also i want that when the current video transit to other video then i shouldn't get black screen.

Question

I want to play multiple videos in a loop one after the other on a single mediaElement control. Also i want that when the current video transits to another video then i shouldn't get black screen in between on mediaelement.

So I am curious if such playlist store type method is available for mediaElement?

I searched on internet. I couldn't able to found out any solutions

Answer 1

Hi,@ Vishal2 Bansal. Welcome to Microsoft Q&A Forum.

To ensure smoother transitions between videos, you could try to set the MediaElement to be transparent during transitions.

 <Grid Margin="50" Width="400" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top">
            <MediaElement x:Name="mediaElement" LoadedBehavior="Manual" MediaEnded="MediaElement_MediaEnded" />
        </Grid>

Codebedhind:

  private List<string> videoPaths = new List<string>
        {
            "C:\\...\\MediaElementDemo\\10MB_WMV.wmv" ,
            "C:\\...\\MediaElementDemo\\20.wmv",
           "C:\\...\\MediaElementDemo\\5MB_WMV.wmv"
          
        };

        private int currentVideoIndex = 0;

        public MainWindow()
        {
            InitializeComponent();
            PlayCurrentVideo();
        }

        private void PlayCurrentVideo()
        {
            var currentVideoPath = videoPaths[currentVideoIndex];
            mediaElement.Source = new Uri(currentVideoPath, UriKind.RelativeOrAbsolute);
            mediaElement.Play();
        }


        private void MediaElement_MediaEnded(object sender, RoutedEventArgs e)
        {
            CrossfadeToNextVideo();
        }

        private void CrossfadeToNextVideo()
        {
            var nextVideoIndex = (currentVideoIndex + 1) % videoPaths.Count;
            var nextVideoPath = videoPaths[nextVideoIndex];

            var fadeInDuration = TimeSpan.FromSeconds(1);
            var fadeOutDuration = TimeSpan.FromSeconds(1);

            var fadeOutAnimation = new DoubleAnimation(1, 0, fadeOutDuration);
            fadeOutAnimation.Completed += (s, e) =>
            {
                mediaElement.Source = new Uri(nextVideoPath, UriKind.RelativeOrAbsolute);
                mediaElement.Position = TimeSpan.Zero;
                mediaElement.Play();
                var fadeInAnimation = new DoubleAnimation(0, 1, fadeInDuration);
                mediaElement.BeginAnimation(UIElement.OpacityProperty, fadeInAnimation);
            };

            mediaElement.BeginAnimation(UIElement.OpacityProperty, fadeOutAnimation);
            currentVideoIndex = nextVideoIndex;
        }

The result:

Or you can also see if the solution here helps you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

For example, use a media element and a black rectangle:

<Window . . .>
    <Grid>
        <Grid Margin="50" Width="400" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top">
            <MediaElement x:Name="mediaElement" LoadedBehavior="Play" UnloadedBehavior="Stop" MediaOpened="mediaElement_MediaOpened" MediaEnded="mediaElement_MediaEnded" Visibility="Hidden" />
            <Rectangle x:Name="br" Fill="Black" Visibility="Visible"/>
        </Grid>

        <Button x:Name="button" Content="START" HorizontalAlignment="Left" Margin="500,50,0,0" VerticalAlignment="Top" Click="button_Click"/>

    </Grid>
</Window>

The code is:

Uri[] files = new[]
{
    new Uri( @"C:\MyFolder\MyFile1.wmv" ),
    new Uri( @"C:\MyFolder\MyFile2.wmv" ),
    new Uri( @"C:\MyFolder\MyFile3.wmv" ),
};

int index = 0;

void StartNext( )
{
    if( index < 0 || index >= files.Length ) return;

    mediaElement.Source = files[index];
}

private void button_Click( object sender, RoutedEventArgs e )
{
    index = 0;
    StartNext( );
}

private void mediaElement_MediaOpened( object sender, RoutedEventArgs e )
{
    mediaElement.Visibility = Visibility.Visible;
    br.Visibility = Visibility.Hidden;
}

private async void mediaElement_MediaEnded( object sender, RoutedEventArgs e )
{
    mediaElement.Visibility = Visibility.Hidden;
    br.Visibility = Visibility.Visible;

    if( ++index >= files.Length ) return;

    await Task.Delay( TimeSpan.FromSeconds( 2 ) );

    StartNext( );
}

The files array is a playlist.

Answer 3

You should use MediaComposition for that...