Designing a Custom Flash Player for Brightcove

ABOUT BRIGHTCOVE

Brightcove offers a wide range of players that will plug right into your site. Its players range from a video window with basic controls to players with tabbed navigation, playlists, related videos, and keyword search. These players are easy to build into your site and connect with videos you've uploaded to Brightcove.

Unlike most drop-in players, Brightcove offers a great deal of customization. You can style existing players using a video player editor where you primarily have control over colors. This goes a long way when you're trying to match the look of your player with the look of your site, but you can take this a step further with a proprietary markup language called BEML (Brightcove Experience Markup Language). Think of BEML as HTML for a media player. You add custom images to replace the Brightcove custom elements (like your play or mute button for example). You also have complete control over which Brightcove components you want for your players and even which buttons you want for your player controls (play button, mute button, etc.).

However, even with base color styling and more advanced BEML modifications, you may still run into styling and component limitations. If you want to really customize your player, Brightcove allows you to take things even further with their API. So, with said API, Adobe Flex, and custom UI and visual design up front, that's what Viget did ...

WHAT THE CLIENT WANTED

Recently, a client who was using the Brightcove video hosting platform to house their comprehensive video library came to us with concerns. They were not completely satisfied with how the players looked and they wanted more functionality than what they were getting out of the existing player components.

The first and main concern was that the components (like tabbed views of custom lists of videos) were not making their videos visible enough. The second concern was that the look of the players weren't customizable enough and the client felt like they weren't getting the visual integration they needed with the rest of their site.

USER INTERFACE

The player we created consists of two views. In the first view, we needed to take into account the large number of videos, so the goal of the design addressed choice and selection. On the main video dashboard page, the user can see a truncated selection of videos in the "Featured Videos" and "Most Watched Videos" sections. Below that, the user gets a wider selection of videos via the "Recently Added", "Highest Rated", "Media Appearances", and "This Week" filters. Not counting the search, a user is only a few clicks away from about 350 videos in this view. This doesn't cover every single video, but it does make every category of video immediately visible.
   

In the second view, there are numerous video choices as well. However, since the user has selected a video to get here, we understand that the main focus should be the video itself and the videos related to it. Aside from the current video playing, there is a list of approximately 50 videos that relate to the chosen video.

To keep available video options accessible, this view offers an expandable view of the four main sections of video by clicking "View More Videos" at the bottom. Here is the wireframe of that view.

VISUAL DESIGN

With the UI nailed down, we were able to apply the font, colors, and styles needed to visually integrate the player with the client's site and brand.

View 1

View 2

IMPLEMENTATION

Ultimately we implemented two players. The first player is the large media console that has been shown, the second is a standalone player used for displaying single videos or embedding videos on other sites. All data was accessed with simple calls to the Brightcove media API. With the exception of the "Most Watched Videos" list (which is compiled by Brightcove video analytics), all video sets are being pulled in as existing playlists that have been set up within Brightcove.

CONCLUSION

We've been quite happy with the results, and we'll be eager to share the final product with you when the site goes live. We wanted to go ahead and share the find though, as we know (from experience) that the search for such solutions is an ongoing and often frustrating one. It seems that Brightcove is offering just what's needed to go anywhere you want with custom video players. From quick-and-easy, lightly-styled approaches to fully customized players, the options and flexibility are rather nice.