Integrating Video Cloud with Plex

In this topic we will walk through the steps required to integrate Plex with Video Cloud.

What is Plex?

Plex is a powerful media center application for OS X. It is an open source project, based on the XBMC code, and very similar in functionality to Boxee. While the main focus of Plex has been centered on robust playback and library management for digital video content on the hard drive, the team has recently introduced an open system for integrating with online video.

The latest releases of Plex now include support for an App Store, which users can access directly from the media center interface (translation: sitting on the couch with a remote control). The app store contains a directory of freely available plug-ins for various web video destinations, including popular sites such as Hulu, YouTtube, and the CBS March Madness streams.

Because Plex natively supports playback of SWFs, FLVs, and even Silverlight files, very little work is required to get your site integrated. Video Cloud publishers can maintain analytics and pre/mid/post-roll advertising while integrating with Plex. In this article, we will walk through the steps required for creating a Plex / Video Cloud integration. Currently, there is no automated method for submitting these plugins to Plex for inclusion in their app store directly, but reaching out through the Plex developer forums with your creations will likely lead to a quick listing.

Sample Plex App: OnePlanet

You can download two zip files that include our sample Plex app, which is called OnePlanet.

Download Brightcove.bundle.zip and unzip it to ~/Library/Application Support/Plex Media Server/Plug-ins and brightcovetemplate.zip to ~/Library/Application Support/Plex Media Server/Site Configurations.

Navigation

Each Plex plugin requires a bundle file in the following structure:

Bundle directory structure

The Brightcove.bundle.zip includes the Python files __init__.py and Brightcove.py, which contain the logic necessary to render the directory structure and play the Video Cloud videos. You'll be happy to hear that Plex "automagically" picks up any changes made to this file during development.

Configuration for the plugin is defined in Resources/conf.json:

  • Key: Unique key to Plex
  • Title: Display title in Plex
  • Token: Read token of Video Cloud account
  • ViralPlayer: Id of player to render video (typically single video player)
  • PlaylistPlayer: Id of player which is assigned playlists (described later)
  • Publisher: Publisher id

The first level of navigation in our Plex app offers a search option, three different sorting methods, and a set of playlists.  The newest videos menu option is the first to display, and is added to the directory through the following call:  

dir.Append(Function(DirectoryItem(Container, L("Newest")),
           command="find_all_videos", sort_type="creation_date", 
           sort_order="desc", page_size="10"))

This call looks a bit confusing, especially if you're not used to functional languages.  Essentially, when the user selects the Newest menu option, the defined Function is executed.  The function invokes the Container function, which in turn calls the Brightcove.MediaContainer helper function in our Brightcove.py file.  Our helper function makes a Media API call based on the supplied parameters, and returns the resulting videos to display in the new directory.

Each of our menu options uses this pattern.  Playlist names and ids are retrieved for our menu by making a find_playlists_for_player_id call (passing in the PlaylistPlayer id from config).  Each returned playlist is displayed in the top navigation.

Graphics files

Plex has a very refined user interface that relies heavily on images customized for the content. When writing a plugin you can (and should!) include images to help bring your brand into play. In Brightcove.bundle.zip, the images are included in the Resources folder. You can also download a zip file with some sample Photoshop files to help in the graphic creation process.

Background Image

The background is a 1280x720 pixel JPEG that sits behind the Plex UI and can be used as a very powerful branding element. This image will be present in the background whenever the user is navigating within your plugin. Part of this image will remain clear at all times, and is a good spot for placing your logo or message. Other portions of the image can be obscured at times by parts of the Plex UI, and are better suited to textures or photographic elements.

Logos, Thumbnails and other Images

Plex also allows for the inclusion of navigation images within your plugin. Because it uses very large thumbnails, we are referencing Video Cloud video stills to represent video thumbnails within the navigation. These can run directly out of your Video Cloud account.

Additionally you can (and should!) specify a logo file for your application that will visually represent it within the app store and on the users' local installation. The logo is a 355x355 pixel JPEG image. Remember that users will be viewing your images from 10 feet away on their couch, and that bigger and simpler is always better when designing your graphics.

Rendering a video

Plex allows you to add a video item to its directory by either pointing directly to the video (the .mp4 or .flv file) or specifying a URL that contains an SWF that renders the video. We chose the latter, since pointing directly to the video would not take advantage of the benefits of Video Cloud players (like advertising, analytics, etc.).

Our video URL is defined as:

BC_VIDEO_URL = "http://x.brightcove.com/plex/video.php?publisherId=%s&playerId=%s&videoId=%s"

And is populated as follows (note the Publisher and ViralPlayer are config values):

url = BC_VIDEO_URL % (Publisher, ViralPlayer, video["id"])
return Objects.WebVideoItem(url, title=video['name'], summary=video['shortDescription'], 
duration=video['length'], thumb=video['videoStillURL'])

Our resulting URL is:

http://x.brightcove.com/plex/video.php?publisherId=5843304001&playerId=14034171001&videoId=XXXX

where video.php simply contains code to render our SWF wrapper and pass in the video ID, publisher ID, and playlist ID query parameters to the Video Cloud player. Since our wrapper takes in the publisher ID and playlist IDs, you can use the exact same call for your Plex plugin. This means all you have to worry about is changing the publisher ID, playlist ID, and token constants within conf.json.

Plex Site Configuration File

Plex requires a site configuration file for any plugins that use Flash. This XML file, brightcovetemplate.xml, contains the site's domain, the location of the SWF, and configurations for interacting with the Video Cloud player. It also defines metrics to crop the player, such that the controls are not displayed. See the Plex documentation for more information about Plex site configuration files.

Seekbar

Part of the site configuration specifies the start and end coordinates of Video Cloud's built-in seek bar. Plex uses these coordinates to produce its own seek bar. Note that "a3b840" is the color of our "played" seek bar.

<seekbar type="simple"> 
  <start x="65" y="377" />
  <end   x="574" y="377" />
  <played>
    <color rgb="a3b840" />
  </played>
</seekbar>

States

Plex has a set of various states in which your Flash SWF can interact, including paused, playing, and end states. A standalone Video Cloud player toggles between pause and play when the user clicks on the center arrow within the player. We use this fact to tell Plex to "click" on location (320,180) when Plex is in the "paused" state and the "play" command is triggered. The same configuration is used when in the "playing" state:

<state name="paused">
<!-- Wait for play command -->
  <event>
    <condition>
      <command name="play" />
    </condition>
    <action>
      <click x="320" y="180" />
        <goto state="playing" />
    </action>
  </event>
</state>

To handle the "end" state, our Flash wrapper defines a mediaComplete handler on the videoPlayer module. The mediaComplete handler, called when the video has completed, draws a box on the player. This configuration tells Plex to move to the "end" state when this box appears:

<!-- Video ends -->
<event>
  <condition>
    <and>
      <color x="0" y="377" rgb="009999" />
    </and>
  </condition>
  <action>
    <goto state="end" />
  </action>
</event>

The Video Cloud Player

Luckily for you, you can reference the same video.php page we've hosted on x.brightcove.com, yet you do have to ensure a player is set up appropriately for the Plex plugin. To begin, create a new player using the following 640x412 template:

<Runtime>
  <Layout width="640" height="412">
     <VideoPlayer width="640" height="412" id="videoPlayer" visible="true"/>
  </Layout>
</Runtime>

In the Publishing module, check "Enable Actionscript/Javascript APIs" and uncheck all options on the "Video Player" configuration tab. Finally, set the ViralPlayer config value within conf.json to the player ID. That's all!

Conclusion

While the overall audience represented by Plex may only be in the tens of thousands, it is a very passionate group of people who are excited about new methods of enjoying great video content. With just a few hours of work, you can easily bring your entire video library front and center in front of this audience. Those of us working here at Brightcove are incredibly excited about the emergence of easy publishing paths to the living room TV, and we look forward to continued work with Plex and all the other innovators in the media center space.

Post new comment

The content of this field is kept private and will not be shown publicly.
0

Comments