Introduction

In last article we achieved clipping videos out of the parent video. To see the article: Click Here. In this article we will see how we can play the clipped video and the good news is Playlist Management is also could be achieved.

Requirements to build the application

We need to have the followings to proceed:

• Visual Studio 2010
• Expression Blend 4

Brief about the project that is being continued

As you had seen the sample in the last article, we had achieved the goals up to clipping videos and saving the xml files. We had designed few screens for Settings, and Video Clipping modules. Let's continue from what we left.

XML Schema

The XML schema of the "ClipSettings.xml" has changed; actually we have added a new tag "Playlists". The idea of keeping another tag is very simple; we would have playlist names with comma separated values.

We have many-to-many relationship between Clips and Playlist. That means any clip can be duplicated in any playlist.

In order to make things as per above discussion, we need to change the following codes, where the clipsetings.xml file was not saving playlist tag.

Go to: SaveClipWindow.xaml.cs and browse to the event handler AddClip_Click, while saving a new tag, add the following after the last element "End":

And in Clips.cs file add a property "Playlists" of type string as following:

Designing the Storyboard module

Let's do design the views related to the Storyboard module. First let's design the Storyboard Player. Open the solution in Expression Blend and create a User Control and name it as "StoryboardPlayerScreenView.xaml". As you had seen the media player controls for Clipping Video player, we don't need the clipping buttons (Start Clip, End Clip).

As you see in above image display, the Storyboard player has 3 main parts, such as:

1. The ListBox on top to display the items playing
2. Media Element to play the Video Clip
3. The Media Playing controls.

As you have noticed, the button "Change Playlist"; well it pops up a view where we would have the ability to add the Clip to a playlist. As per our previous discussion, we could have a clip in many playlists. Let's design that view:

As you can see from the above image display, we have a listbox displaying all clips without any filter value. And some controls on the other side. The idea here is to select a clip from the listbox and based on the clip's data on playlist whether existing or not, we would save data. Also note that we have a option for new or use available choices, if the new choice is selected then you would be prompted to type in your playlist name. For the 2nd option selection, we are displaying a combobox with available playlist, so that it could be re-used.

Loading Clips from the XML file

We have already achieved this for loading settings data from the xml file, let's redo that. Let's have a method ReloadClippingData(), this method would read the XML file from My Documents\DClipper path and load the data as below:

Now we need to call this method in the constructor of the User Control, also we need to create an instance of a DispatcherTimer object so that the position of the slider could be moved as the video plays. Also we need to assign the items present in the ListBox (Clips in the listbox), so that the next and previous buttons would fine.

As you see from above code display, a text is displayed as "Playing : ...", this is provided to know which playlist is currently being selected to play. If no playlist is selected then it would display as "Playing : All".

Now let's directly move to the media controls.

Play – Pause

This button control would let's play or pause the video clips.

The first condition checks whether the pause is clicked, if paused then do the required. If you notice we have a bool variable IsFirstPlayPressed. This is required to check whether the Play button is pressed for the first time or not. The idea for playing multiple clips goes like this, the video clip has a videopath and of course the start and end clip timings. So we have to get the list of clips from listbox, and start two timers, one for synching the video position with slider and the other one is to display the current position of the clip being played.

On Media Opened event handler, we need to seek to the position for the start position of the clip and play the clip and to start the timer.

The display timer requires to display the current position of the video from it's total clip length.

Previous and Next

Video index is a variable which actually helps us to know the current video index from the list. So based on that we do some validations and play the next or previous video.

And for Previous Click:

Moving Positions

Now moving to a new position within the video clip length. This could be achieved using the slider value and the timers (DispatcherTimer) we are using.

As you see in above code display we are handling the Slider's DragStarted event, where we are stopping the timers.

On Drag completed, we are restarting the timers with the new values.

Auto Next on playing

As per the normal video player option, after the current media finishes playing it moves to next and on. We require doing that, actually the timers are meant to check that only. On timer tick event handler the following is achieved:

As you see in the above code display, we are checking the display time with the length of the clip. That validates whether to move to next video clip or not.

Removing a Clip

As you notice we have the same template as the video clipping listbox do, so we can remove a clip by clicking the cross on the right. To achieve that we need to follow the code:

Playlist Manager

Last but not the least our new feature as I discussed in the last article, a playlist manager has the following functionalities:

• Adding a Clip to a Playlist
• Adding a Clip to multiple playlists
• Adding a Clip to already available playlist
• Play selected playlist
• Play all videos

The first two sounds like updating (updating playlist tag value) the xml file. Yes that's true, based on the selection "New" or "Use Available" a Textbox or a ComboBox would be displayed respectively. And on save click the data would be updated/modified accordingly.

Once we have playlist names, we are displaying in a ComboBox for playing the selected ComboBox.

As we are separating the playlist names with a comma (,) the load method goes like this:

On Selection of the option "New" or "Use Available", display the appropriate control.

To save the playlist we need to take the data accordingly as per the selection made, so that proper data would go into xml file:

On Play Selected playlist click we are taking the playlist name and filtering the list where it contains the playlist name. And after that the Listbox is loaded.

The following method helps us to filter using the LINQ query.

Now let's test the Storyboard player.

As you see in above image, a clip is in two playlist. And other controls are working as required.

Conclusion

This is actually nice to have this if you don't like to keep video clips as a separate media file. If you have the full length video just clip it as per your requirement and keep your clips in a playlist.

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra This author has published 13 articles on DotNetSlackers. View other articles or the complete profile here.