JW Player Plugins

By Larry B, February 10, 2010

SlideSync/SlideScroller Plugin for JW Player 5.x

SlideSync screenshot

SlideSync

The SlideSync and SlideScroller plugins for JW FLV Player 5.x create a synchronized slide show entirely within the JW player. The SlideSync plugin displays slides to the right or the left of the video. The SlideScroller plugin can be used with the SlideSync plugin to display a click-to-navigate scrolling thumbnail gallery of the slides beneath the video.

See an example of the SlideSync plugin in action and the XML file used for the example.  SlideSync source code is available.

SlideSync and SlideScroller are served from Longtail Video’s plugins directory, and are free for commercial and non-commercial use.

Setting up SlideSync

The slide URL and timing information is read from an XML file with the following format:

<?xml version="1.0" encoding="UTF-8"?>
<slideshow>
<slides> <slide>
<url>Slide0001.gif</url>
<time format="hhmmss">00:00</time> </slide>
<slide>
<url>http://yourdomain.com/slides/Slide0002.gif</url>
<time>5</time>
</slide>
</slides> </slideshow>

Urls can be fully qualified URLs, or relative to the page that contains the player.  Be aware of crossdomain issues if you’re requesting the XML from a different domain. Times are in seconds, unless the format attribute is set to “hhmmss”, in which case times can be entered in HH:MM:SS format.

Flashvars:

plugins=slidesync-1,slidescroller-1:(required)
This parameter causes the player to load the plugins. Include one or both (separated by commas), they will load directly from Longtail’s servers. If you’re using both plugins, be sure to list slidesync-1 first, as load order impacts the layout of plugins in the JW player.

slidesync.xmlPath:(required)
The path to the xml file that contains the slide data

slidesync.position:(required)
Can be set to right or left. If the SlideScroller plugin is used, this must be set to right.

slidesync.size:(required)
The width of the slide area within the total player area. The video width will default to the difference  between this value and the total width of your embedded player.

slidesync.bgcolor:(optional)
The background color of the slides area, in HTML hexadecimal format (e.g. ‘#FFFFFF’).  If this value is not set via a flashvar, it will default to the screencolor set for the JW Player itself. If that is also not set, the default is white.

Setting up SlideScroller

The SlideScroller plugin accesses the same XML data downloaded by SlideSync.

Flashvars:

plugins=slidesync-1,slidescroller-1: (required)
This parameter causes the player to load the plugins. Include one or both (separated by commas), they will load directly from Longtail’s servers. If you’re using both plugins, be sure to list slidesync-1 first, as load order impacts the layout of plugins in the JW player.

slidescroller.xmlPath:(required)
The path to the xml file that contains the slide data.

slidescroller.position=bottom:(required)
Bottom is the only valid option for this flashvar.

slidescroller.size=150:(required)
Sets the height of the thumbnail gallery.  Since the thumbnail gallery does not scale automatically, 150 is the only
supported value.

slidescroller.highlightcolor:(optional)
Sets the color of the box that highlights the current slide in the gallery. Defaults to #FFFF00.

slidescroller.textcolor:(optional)
Sets the color of the time code text that appears beneath each thumbnail in the gallery. Defaults to #444444.

slidescroller.bgcolor:(optional)
Sets the background color of the gallery.  If this value is not set via a flashvar, it will default to the screencolor set for the JW Player itself. If that is also not set, the default is #EEEEEE.

Background:

These plugins were created to explore what’s possible with a JW Player plugin.  There are functional elements or UI behaviors that could use more polish, and I may get to it over time.  Suggestions are welcome, as are contributions of code or other resources.  You may download the source code to these projects here. SlideSync can be built with the free Adobe Flex SDK. SlideScroller requires Flash CS3 or later to build.

Thanks go to several Web resources whose expertise, examples, and code resources I relied on to bone up on JW Player/AS3/Flash/Flex enough to build this:

Sothink SWF Decompiler ImageOne other thing that’s been invaluable in learning how JW plugins work has been being able to decompile a plugin’s SWF file to get the FLA and the ActionScript files.  Where no source is published, it’s the only way. The product I’ve used is Sothink SWF Decompiler (or Sothink SWF Decompiler for Mac), and it’s been great.  When you decompile a SWF, it’ll create a directory with the FLA, resources and AS files. Things like comments in AS files, and sometimes the original variable names, will not be preserved, but the code is entirely intact and buildable. (NOTE: this is an affiliate link (helps pay for hosting this site!), but I only link to things that I’ve actually used and like.  This SWF Decompiler is a part of my regular toolset.)

3 Responses to “JW Player Plugins”

  1. Snaky says:

    Hi, this looks good! Is it possible to change the size and the position of the video? Like described here:
    http://www.longtailvideo.com/support/forums/jw-player/player-development-and-customization/14451/change-video-size-position-background-while-playing

    Where is the right place to discuss development of this plugin?
    Thanks!