Custom Video Player Demo for NY Video 2.0

From KickApps Documentation

Last night I went out to Yaron Samid's NY Video 2.0 meet-up and showed the group there how to build a custom video player in the App Studio (check out the blog post). The player I used in the presentation has a number of custom features, including multiple playlists, a tab slider, and a custom video details screen. I'd like to take you through how I built it so that you can use some of the same techniques in your own players.

---

This widget is composed of a video player component and a list component serving as a playlist. The tab bar above the list is composed of a series of buttons sandwiched between two rectangular shape components, with 1px shape components serving as dividers.

Connecting multiple playlists to the same video player

To have the list component play in the video player, I selected the Play in.. option on the list's Click Action panel.

That ensures that whenever someone clicks on an item in the list, it will play in the video player. With the list hooked up to the video player like this, I can create multiple playlist functionality by simply changing the content in the list. To do that I applied the Update Property action to each of the buttons in the tab bar and had that action change the media URL property of the playlist component to the URL of the feed associated with the button that was toggled on. Don't worry, that sounds more complicated than it is:

Tweening the tab slider

When you click one of the buttons on the tab bar, the blue slider slides behind it. To accomplish this, I applied the Tween Property action to each of the buttons, using a new trick to tell the slider what position to take. As mentioned in the 4.0 release note, you can access any of a component's properties by enclosing componentName.propertyName with a set of braces preceded by the number sign, like this: #{componentName.propertyName}. In this case I tweened the slider's X value to the X value of the button. (ChannelBG is the slider's name in the shot below.)

Adding a custom video details panel

When you pause the video player, it minimizes to the upper left-hand corner, revealing a different screen with additional details about the current video, along with options to share and rate the video on its play page.

To minimize the video player, I used one Tween Property action to reduce its height:

... and another Tween Property action to reduce its width:

The Contributor, Date, and Description fields on the video details screen are all text components that take their content from the current video by using the Bind to.. option in the Text Component Properties panel. In the shot below I've bound the text component to the date of the current item in the playlist:

I used the same technique to populate the Description and Contributor fields with data from the current item in the playlist.

If you'd like to use this widget in your App Studio, drag and drop it from the Widget Gallery tab in the top panel of the App Studio.

I hope you've enjoyed this quick tour and encourage you to experiment with these and other techniques. Please direct any comments or questions to the Creating Widgets forum on the message board, and don't forget to let us know about your own adventures in the App Studio!