How to Synchronize Slides for the JW FLV Player
The free SlideSync and SlideScroller plugins for the JW FLV Player offer a drop-dead easy way to synchronize slides with on-demand video.
There are many ways to synchronize images with an on-demand video stream. This article will briefly describe and compare a few of the ways you can synchronize images with a video stream in Flash, and then go into detail on how to do it with SlideSync/SlideScroller.
There are three general methods for synchronizing slides with on-demand video:
1. Cue points in the video file
2. JavaScript listeners which read the player's time code
3. An integrated flash application
Cue Points
Cue points can be embedded into an FLV or F4V video file using Adobe Media Encoder or inserted via ActionScript code. When the player encounters a cue point in the stream, it sends an event which is detected by ActionScript listeners written in Flash or JavaScript listeners in the page.
This approach tightly couples the event information with the video file itself, which might be a benefit if you want to make sure the slide data is always available with the video. But this tight coupling also makes the slide data more difficult to look at, more difficult to edit, and requires development of custom code to provide a user interface for navigation, to listen for the events and to display the slides.
JavaScript Listeners
Many Flash-based players have an API that allows JavaScript in the Web page to track the time position of the video as it plays. JavaScript code uses this position information to load slides in the page.
This approach offers the most flexible display options. Since the Web page manages the display of the slides, you have all the capabilities of HTML and CSS available for managing your layout. On the downside, it requires custom JavaScript code for providing a user interface for navigation and displaying the slides.
SlideSync/SlideScroller
The SlideSync and SlideScroller plugins integrate directly into the JW FLV Flash video player (version 5.x is required) and display the slides in Flash rather than in HTML. The SlideSync plugin is responsible for the display of the large slide next to the video. SlideScroller displays the scrolling index beneath the video. They can be used together or separately.
The benefit of the plugin approach is its simplicity. The player handles everything in a self-contained presentation that's not dependent on any external scripting or HTML code. The disadvantage is that offers less control over the layout of the presentation.
I originally wrote the plugins largely as a proof-of-concept, but since they may be useful as-is to many users, they are being offered free for commercial and non-commercial use. The present versions of the plugins will remain free forever, although future, more advanced versions may require a commercial license.
You can see an example of the plugins in action and look at the slide and timing information that's read from an XML file.
How to Set It Up
Slide timing information is read from an XML file hosted on your Web site. The URLs to the slides can be absolute URLs, or can be relative to the page URL. Slide timing is in seconds unless the format="hhmmss" attribute is added to the TIME tag.
<?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>
Configuration parameters are passed to the player via the flashVars attribute of the EMBED tag, or if you're using SWFObject 1.5, via the addVariable(name, value) method. I'll use swfobect.js here for readability.
Here's an example of the code to embed JW FLV Player in a Web page
<script src="swfobject.js"></script>
<div id=flashDiv">This text is replaced by the Flash movie</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','flashDiv',640,480,'9');
so.addVariable("file","http://path_to_the_video");
so.addVariable("provider","video");
</script>
To use plugins with the JW FLV Player, add the names of the plugins in the ‘plugins' flashVar. If you are using both plugins, because load order affects the layout of the plugins in the video player, you should load SlideSync before SlideScroller.
so.addVariable("plugins","slidesync-1,slidescroller-1");
Each plugin has a few required configuration parameters, and some optional ones. The full documentation describes them in detail, but be aware of a few rules of thumb and limitations.
Loading the XML Data
These may be relative or absolute URLs to the XML file containing slide data. Because of Flash's cross-domain security constraints, you'll have to host the XML files on the same domain as the JW FLV Player, or place a crossdomain.xml file on the server that hosts the XML.
so.addVariable("slidesync.xmlPath","slidedata.xml");
so.addVariable("slidescroller.xmlPath","slidedata.xml");
Presentation Layout
Control over the layout of a presentation is limited, although there are optional settings for background color, highlight color, and text color.
The slidesync.size flashVar determines the width of the slide image within the overall player layout. The video will scale down to fit in the remaining space.
so.addVariable("slidesync.size", 400);
To make the best use of your screen real estate, you may need to adjust the slidesync.size and the player's height. The slides will scale vertically to maintain the correct aspect ratio, so if you've got empty space above or below your slides, decrease the overall height of the JW FLV Player, or increase the width of the slide area (via slidesync.size) which will also increase the height of the slides.
Some values are inflexible, but still must be provided so that the player will render the plugin properly. In this version of the plugin, the slidescroller must be on the bottom, so no other value is valid here:
so.addVariable("slidescroller.position", "bottom");
The height of the scrolling slide index is fixed, so 150 is the only valid value here:
so.addVariable("slidescroller.size", 150);
A complete code example is shown on the SlideSync/SlideScroller demo page.
Conclusion
As noted above, these plugins will remain free for commercial and non-commercial use in perpetuity. An enhanced, commercial version may be developed in the future, with a feature set based on feedback and suggestions from users.
Related Articles
Combination of cloud-based player and premium content library gets videos and ads on sites immediately.
22 Jun 2011
Acquisition combines the leading open source video player with the top open source ad platform.
25 Aug 2010