Create your own Mini YouTube TVs
By combining the new YouTube video integration plus a user-defined implementation of the YouTube Data API, we were able to create miniature television sets that have custom channels!
Sure, YouTube lets you embed a video anywhere, but now you get to embed your own personalized TV channel with a long list of your favorite videos.
This post will document the components and techniques used to build this particular app. However, if you’d like to re-use this one and customize it for your own YouTube content, here are some shortcuts:
- User Channel – This version will let you play all videos uploaded by a particular YouTube user.
- User Favorites – This version will let you play all videos that have been marked as a “favorite” by a particular YouTube user.
- YouTube Search – This version will let you play all videos that match a particular search term.
- A single video – This version will let you play a single video, as defined by the YouTube video ID.
Anatomy of the TV
We’re going to break down this application to give you a better sense of how it was created and perhaps inspire you to create your great video app. This application has three basic elements:
- Pretty artwork!
- A video player object that plays video and responds to controller input
- User interface controls to start, stop, and change the channel for the TV
- A web service that locates the desired video and all of the related content
Pretty artwork
There is one large rectangle that has the television artwork applied to it. The artwork was created in such a way that the center (display) space was made transparent. This provides the ability to see other objects that have been placed in the background.
The artwork on the rectangle has been marked as “configurable” so other users can re-skin their televisions during the customization process. If you’d like to create your own skin for this particular television, create a jpeg or png that is 300 x 225. The transparent cutout should be 266 x 150 and offset from the top edge by 8 pixels. You can upload the skin during the customization.
Kudos to Man Vs. George Design studio for some handsome artwork!
YouTube video player
In the background, there is an object that displays the video. It’s nothing more than a rectangle that has some additional logic to control the playback features. As we discussed earlier, the key element to playing YouTube videos is through the manipulation of an object’s image property.
To simplify access to the video player’s properties, methods were defined on the object. This allows the application to manipulate the channel using higher level functions.
These four methods provide access to other objects in the application to control playback. But it lets the video player actor itself decide how to implement them. You can find this actor – “video player” – available in the asset manager to be used in your own application.
User interface controls
You’ll notice that there are several controls sitting on the lower portion of the television. These are just rectangles with artwork applied. They each have behaviors defined on them that declare what should happen when a mouse click occurs. Under the hood, they utilize the methods defined on the video player to manipulate the video.
The “?” button is slightly different. It creates a hover screen and displays some of the details for video that is currently being played (like name, play count, and average rating).
YouTube web services
Rather than simply specifying a single video for playback, this app leverages the YouTube web services objects to locate video streams for playback. This not only creates an opportunity to access limitless amounts of video content, but it also provides access to all of the video details including title, description, ratings, view counts, comments, etc. Anything you find on the video’s YouTube page, you can find in the web services. What awesome power!
Google provides access to this data via their YouTube Data API. Several of these API feeds have been implemented within Sharendipity. You can access them simply by dragging the definition types into your application. Just search the asset manager for “YouTube Service” and you’ll find several feeds under the “Types” category:
- Access to a user’s uploads
- Search by query terms
- Access a user’s “favorites” list
- Access to individual videos based on video ID
- Search by YouTube channel
All of these services return an array of YouTube data structures that describe all of the details of individual videos.
Is there a missing feed you need? Anyone can create these so feel free to jump in. Of course, if we can help, we’d love to hear from you.
New opportunities
We’re really excited about the potential with video. By providing access to Google’s Player API as well as the Data API – while abstracting away all of the programming – we think great things can be accomplished in gaming, marketing, as well as education.
Everyone has the opportunity to build engaging video content now. Go get started!
Leave a comment