Previews!
While exploring the available tools for video, audio and image encoding, I stumbled upon some good ideas. Video previews are always a golden cookie in any video conversion tool. So I figured, why not add video preview to the application?!
Most of you are probably thinking "Would that increase processor load?". The short answer is: yes, it will. That's why I've only done it for individual files. That said, you can only preview one item at a time. Enough of the ideas, let's take a look at how we do this:
So,I did a bit of digging up on WPF MediaElement component. If you dont know what that is, go read it up here. But to summarise, it lets you play videos on a WPF application, with tons of additional controls (which don't really have to be visible). I did a few experiments like hover-over, automated button clicks, etc.
To begin, here's what I did:
I added XAML code for the MediaElement component into the application through the designer. Pretty basic stuff, drag-and-drop shenannigans. Or, if you want to, you can define some extra controllers inside the XAML code like so:
Then I added a bunch of 'event handlers'. Note that LoadedBehavior is essentially the MediaElement's first go-to function. This determines your next handlers, so in my example, i've added the MouseEnter and MouseLeave handlers. I'll explain what exactly I'm using those handlers for in a bit.
I mentioned in the concept that the application has some drag-and-drop functionalities. So to continue on that concept, I added a Drop handlers for the main application that allows you to drag files into it. The file path is the stored in a variable which can be used by the preview example here.
Lets continue - the MediaElement component takes in a source(usually the Uri of a video file), and a bunch of other parameters I don't need. This is just a sample app to try out the WPF's built-in components. So, what i did was, whenever I dragged a video file into the window, the variable which holds the file path gets assigned to this MediaElement component's source target. You can see that I've named the MediaElement component VideoPreview in the XAML code above. This is the end result:
The part where the VideoPreview component picks up the source is done as follows:
Note that this is a snippet of both the drag and drop and video preview code:
The VideoPreview component in the xaml code earlier had its LoadedBehavior set to Manual, which means that somewhere in the code, I have to instantiate it myself, hance the VideoPreview.Pause(); line at the bottom. This simply starts the preview and pauses it after 1 second.
Earlier, I've also added the MouseEnter and MouseLeave handlers. To test the VideoPreview component, I added simple Play and Pause functionality when you enter and leave the preview box. This is done like so:
Now the coding is sort of done. So lets give it a bash!
This is what it looks like when it's running and you have the mouse hovered over the preview box:
Pretty nifty right? The details of the clip on the right hand side is just done in the ProbeFile method in the snippet above, but I'll save that for the next post!
Most of you are probably thinking "Would that increase processor load?". The short answer is: yes, it will. That's why I've only done it for individual files. That said, you can only preview one item at a time. Enough of the ideas, let's take a look at how we do this:
So,I did a bit of digging up on WPF MediaElement component. If you dont know what that is, go read it up here. But to summarise, it lets you play videos on a WPF application, with tons of additional controls (which don't really have to be visible). I did a few experiments like hover-over, automated button clicks, etc.
To begin, here's what I did:
I added XAML code for the MediaElement component into the application through the designer. Pretty basic stuff, drag-and-drop shenannigans. Or, if you want to, you can define some extra controllers inside the XAML code like so:
Then I added a bunch of 'event handlers'. Note that LoadedBehavior is essentially the MediaElement's first go-to function. This determines your next handlers, so in my example, i've added the MouseEnter and MouseLeave handlers. I'll explain what exactly I'm using those handlers for in a bit.
I mentioned in the concept that the application has some drag-and-drop functionalities. So to continue on that concept, I added a Drop handlers for the main application that allows you to drag files into it. The file path is the stored in a variable which can be used by the preview example here.
Lets continue - the MediaElement component takes in a source(usually the Uri of a video file), and a bunch of other parameters I don't need. This is just a sample app to try out the WPF's built-in components. So, what i did was, whenever I dragged a video file into the window, the variable which holds the file path gets assigned to this MediaElement component's source target. You can see that I've named the MediaElement component VideoPreview in the XAML code above. This is the end result:
The part where the VideoPreview component picks up the source is done as follows:
Note that this is a snippet of both the drag and drop and video preview code:
The VideoPreview component in the xaml code earlier had its LoadedBehavior set to Manual, which means that somewhere in the code, I have to instantiate it myself, hance the VideoPreview.Pause(); line at the bottom. This simply starts the preview and pauses it after 1 second.
Earlier, I've also added the MouseEnter and MouseLeave handlers. To test the VideoPreview component, I added simple Play and Pause functionality when you enter and leave the preview box. This is done like so:
Now the coding is sort of done. So lets give it a bash!
This is what it looks like when it's running and you have the mouse hovered over the preview box:
Pretty nifty right? The details of the clip on the right hand side is just done in the ProbeFile method in the snippet above, but I'll save that for the next post!
Comments
Post a Comment