From Plex

Notes

The site config file is only needed when:

the plugin is displaying Flash or Silverlight video content
you aren't using direct links to the source video files (which is the slightly preferred method)
you aren't using the online RTMP (Flash) or Silverlight player we're offering on the Plex website

Gathering inital Information

First you need to gather some information about the video player you will be creating your plugin for. Take a screenshot of the player in Safari (Cmd+Shift+4). Make sure to grab some whitespace around the player so you can define where it starts and ends. Also make sure the mouse is hovered over the seekbar, this can change colors and dimensions of the bar. You can use this image to generate your config file I used this:

MTV1

Crop the image

Next open the file in an image editor (I used the gimp, Photoshop will work just fine). Crop the image to match the area of your target , make sure you crop it perfectly from edge to edge, you will need pixel counts to match so that you can control the plugin properly and display all the data.

MTV2

The Site Config File

<site> tag

Site URL

We also have to identify the site URL. This will take Plex Media server which Config file to load when pages are passed to it. This is very easy to identify and can usually be the sites address of the site.

Wild cards are allowed too if you want to do all sub domains. Some example are:

[code]http://www.mtv.com http://*.mtv.com http://www.mtv.com/videos http://.*joost.com [/code]

Plex will use the longest match so it's possible to have 2 site configs for a website. This is useful if the videos on one part of the site are different than other parts. This can be seen on the Colbert Report sites for Full Videos and Clips Notice how the Full Episodes player is much bigger than clips? Also Colbert Clips match the player for other comedycentral.com players. In this case we could have a more generic config for the following:

[code]http://*.comedycentral.com http://www.comedycentral.com/colbertreport/full-episodes [/code]

Plugin

Flash

This one is a bit trickier. This it the path to the Flash player that we will be using. Most of the time viewing the source of the page and doing a search for .swf will identify the correct player for you. Some pages will have multiple players for adverts, etc. so check them all. In MTV does it a little differently using not adding the .swf Here are some examples of various entries for plugins:

[code]http://media.mtvnservices.com/mgid:uma:video:mtv.com http://media.mtvnservices.com/mgid.*southparkstudios.com http://.*.joost.com/player/bin/joostPlayer.swf [/code]

Once we have all this information we can create the top level site tag:

[code]<site site="http://www.mtv.com" plugin="http://media.mtvnservices.com/mgid:uma:video:mtv.com" initialState="playing" version="1.0">

</site> [/code]

Silverlight

For Silverlight content, the plugin value shouldn't be a URL. Instead you write plugin="silverlight": [code]<site site="http://www.site.com" plugin="silverlight" initialState="playing" version="1.0">

</site> [/code]

<crop> Tag

We need to identify the area of the window that is used to PLAY video. In this example video is 512x286 and starts at the very top left corner and goes down to the bottom right just about the player controls. If the player has extra data that you would like to crop out you can note the pixel width and height that you wish to crop from the top and left. To crop from the right just reduce the Width and Height of the player.

[code] <crop x="0" y="0" width="512" height="288" />[/code]

Coordinates can also generally be specified relative to the bottom or right edge of the video player by specifying a negative number of pixels (e.g. x="-5"). This can be very useful when the size of the player varies, but controls etc. remain static at the bottom edge for example.

<seekbar> Tag

Next we will identify the seekbar so that we can fast forward/rewind.

simple

The type of seekbar we are using is simple (hulu.com and mtv.com both use simple seekbar). We use the most upper left pixel of the start bar (63x290) for the start and the most upper right pixel (388x290) for the end.

Next we have to define the color of the seekbar. This lets Plex know how much of the video has played. You can define multiple colors here. For some reason trying to get the color values in The Gimp produces the wrong values. I opened the picture in Preview and used Digital Color meter to get the RGB as Hex, 16 Bit Vales of the seekbar. The color I got is 4f4f4f. I did the same thing for the seek bar with the mouse hovered over this netted 616161. [code] <seekbar type="simple"> <start x="63" y="290" /> <end x="388" y="290" /> <played> <color rgb="4f4f4f" /> <color rgb="616161" /> </played> </seekbar> [/code]

Coordinates can also generally be specified relative to the bottom or right edge of the Flash player by specifying a negative number of pixels (e.g. x="-5"). This can be very useful when the size of the player varies, but controls etc. remain static at the bottom edge for example.

thumb

Another type of seek bar is the "thumb" This is used in the comedy central, The Daily Show and The Colbert Report plug-ins. It's used if you have a thumb that you drag to seek instead of clicking on the area you will seek to. What we do is define the first color of the thumb bar. Plex will then use this to track the timeline and will drag this bar for seeking

[code] <seekbar type="thumb"> <start x="44" y="371" /> <end x="291" y="371" /> <played> <color rgb="d3d3d3" /> </played> </seekbar>[/code]

<condition> Tag

The condition Tag is used to identify a condition in the player.

paused

Plex can detect when the player is paused and use that to send Plex into the proper state. Here in The Colbert Report plug-in we are defining two conditions that would describe that the video is paused. The <or> statement tells plex that either Regular paused or "Sometimes it's a funky color paused" will identify the player as paused. Next the <and> statements tell Plex to look at the specific pixels for color changes. In this cases we look at the play/pause button and detected some pixel changes that happened when it changes from a Pause Icon to a Play Icon.

[code] <condition name="paused"> <or> <and>

<color x="16" y="366" rgb="ffffff" /> <color x="24" y="371" rgb="ffffff" /> <color x="16" y="376" rgb="ffffff" /> <color x="10" y="372" rgb="67b6da" /> </and> </or> </condition>[/code]

<state> Tag

Playing/Paused (simple)

Next we need to define Some states for our Video (playing, paused and ended). What we are doing here is defining where the plugin should "click" the screen when in each state to toggle pause/play and also how to identify the video has stopped. Since the play button is rather big we just need to define one pixel, in this case I chose 15x304. There is no "right" answer here, as long as the pixel you choose will play/pause the video it will work. Next I need to define which state we will go to when click this. For example if we are playing then we should go to "paused" state. and visa versa.

[code] <state name="playing"> <event> <condition> <command name="pause" /> </condition> <action> <click x="15" y="304" /> <goto state="paused" /> </action> </event>

<state name="paused"> <event> <condition> <command name="play" /> </condition> <action> <click x="15" y="304" /> <goto state="playing" /> </action> </event> </state>[/code]

Playing/Paused (advanced)

You can also use values retrieved from the paused condition tag noted above. Here we are telling Plex where to click when pausing a video. Once the video has been paused the player should detect if the state is playing or paused.

[code] <state name="playing">

<event> <condition> <not> <condition name="paused" /> </not> </condition> <action> <goto state="playing" /> </action> </event> </state>[/code]

Identify End of Video

The Moment of Truth

Once you have your site config file created make sure it has an .xml extention and drop it into [code]~/Library/Application Support/Plex Media Server/Site Configurations[/code]. There is no need to reload Plex Media server as it detects new Site Configurations and automatically loads them. Once this is done you can create a blank text file with .strm as the extension. This file will contain:

[code]plex://localhost/video/:/webkit?url=[/code]

Followed by the URL to a page that hosts the file. Some examples are:

[code]plex://localhost/video/:/webkit?url=http://www.thedailyshow.com/full-episodes/index.jhtml%3FepisodeId%3D217702

plex://localhost/video/:/webkit?url=http://www.comedycentral.com/colbertreport/full-episodes/index.jhtml%3FepisodeId%3D219946

plex://localhost/video/:/webkit?url=http://www.theonion.com/content/video/are_violent_video_games [/code]

Note that you need to follow URL Encoding Rules so if the URL has any characters like = : ? ! in it. So for example if the URL has a Colon ( : ) in it you will need to replace it with %3A.

Now that you have your .strm file created save it and try playing it in plex. If everything is correct your video should start playing!

Including Site Config files in your plugin bundle

When releasing your plugin, you can include the needed Site Config file(s) in the plugin bundle. Give them a useful name and place them in [code]MyPlugIn.bundle/Contents/Site Configurations/[/code]

main

Creating Plugins Site Config