WPF: drawing a video using MediaPlayer, VideoDrawing and DrawingBrush

I've decided to start this blog for a simple reason: I was recently doing some research on various subjects, and was unable to find any clear documentation. And here I was thinking the World Wide Web had all the answers. Perhaps my contributions will help some of my fellow developers!

This first article is about how to draw a video using the MediaPlayer class in WPF (C# only - my apologies to VB.NET users: I'm allergic to VB). I was in the middle of preparing a training session at Avanquest Software when I read something in the WPF MOC: using the MediaElement control isn't the only way you can draw a video on a surface. Doh! I investigated a little further on the subject but couldn't find anything on the subject.

What does this do?
This article will explain how to use the MediaPlayer class to play a video on a surface. To demonstrate the wide range of possibilities offered by this mechanism, I will explain how to draw the same video clip on 9 different controls simultaneously.

MediaPlayer
First, you need to instantiate the MediaPlayer class. This class lets you manage the playback of a media file by exposing methods such as Play, Pause, Stop, etc. The constructor doesn't accept any parameter. Then use the Open() method to specify the media you wish to play. In our example we'll be playing a video.

MediaPlayer mp = new MediaPlayer();
mp.Open(new Uri("c:/video.avi"));

VideoDrawing
Then initialize a new instance of the VideoDrawing class. This class is used to do the actual drawing on a surface. Instantiate a new object and affect its "Player" member to the MediaPlayer instance you've declared above. Finally, affect the "Rect" member to specifiy the zone where the video will be drawn. Since we're going to be using the video source as a background for our controls, the video will be stretched to fit the control space so the value you specify here don't matter -- just make sure to specify a value greater than 0 as Width and Height.

VideoDrawing vd = new VideoDrawing();
vd.Player = mp;
vd.Rect = new Rect(0, 0, 100, 100);

DrawingBrush
At this point, nothing is drawn on the window. You need to instantiate a DrawingBrush based on your VideoDrawing instance:

DrawingBrush db = new DrawingBrush(vd);

Your "db" variable is now an instance of DrawingBrush, meaning you can affect any property that is of type Brush, such as Control.Background, etc. In my example, I've got a grid with 9 cells, each of these cells contains a button.

foreach (Button b in videoGrid.Children)
b.Background = db;

Once this is done, all you have to do is to call the Play() method of the MediaPlayer instance.

mp.Play();


I've provided a quick demo source code with this article. It plays the file located at c:\video.avi so make sure to either have a file with the same name or, of course, change the location of the file you wish to play.

Download demo project

Comments

Froghut said…
Thanks, your article really helped me getting started with video backgrounds! =)
Michele said…
Thanks for your post.
I have a question if you can help me.
Is it possibile to play only a portion of a video?
I mean... can i play on a surface not the whole video but only a part it? (for example a video crop of 100x100 pixel at the right-top of the video source).
I need to play different part of a video on different controls having the same source.

Thanks

Michele
Unknown said…
thanks, i tried this and is working good on my windows 7 pc. but the video is not showing on xp.
what am i missing, please help
Anonymous said…
Good one. also i found another good example here . http://articlesforprogramming.blogspot.in/2013/06/create-media-player-in-wpf.html
Unknown said…
This comment has been removed by the author.
Unknown said…
This comment has been removed by the author.
Unknown said…
abdul Rahuman: to work in XP, you need to install windows Media Player 11 and that's it!
Unknown said…
I was working and suddenly I visits your site frequently and recommended it to me to read also. The writing style is superior and the content is relevant. Thanks for the insight you provide the readers!
juego | zombies | jogos

Popular posts from this blog

Affiliate module for Interspire Shopping Cart

How to fix: Outlook on iOS/iPhone: "No Internet Connection"

Dealing with Nginx 400 Bad Request HTTP errors