I don’t use the built-in Captivate playbars very often, since I don’t particularly like their look and feel, and their lack of options to fine-tune style and functionality. However, for simpler projects I do use them at times.
One of the many limitations, and a thing that has always been bugging me, is the fact that they don’t provide any controls to set audio volume level, other than mute or unmute; something that I’d guess a user simply expects as part of any kind of player controls these days. An accomplished web designer and JavaScript coder might be able to add this feature to the playbars, but given their mentioned overall limitations, this might not really be worth the effort. Anyway, my humble skills are nowhere near sufficient to pull this off. So is there some quick and dirty work around?

Captivate comes with the ‘Volume Control’ Learning Interaction. Like most of these Learning Interactions (aka HTML 5 Widgets), this again has severe limitations with respect to being able to fine-tune style and functionality, but it’s at least something. However, it resides on the stage and as such cannot be part of the playbar. The user experience I had in mind was that of the learner rolling the mouse over the mute button on the playbar and a volume slider pops up, mouse out and it is hidden, like you would have it on the next best video player.

What if one could make Playbar (off-stage) and Learning Interaction (on-stage) kind of talk to one another to make this happen? I toyed around with JavaScript event listeners and tried to throw together a script that would do that. Now I would rate myself still a beginner with JavaScript, so any seasoned coder without any doubt will find my whole approach just hilarious, but hey, it seems to work. See it I action here:

The Volume Control is shown when the mouse is moved over the playbar’s Mute button. Once shown, it can be interacted with on the stage. It is hidden again as soon as the mouse is moved out of its bounding box on stage, to one of the playbar elements next to the mute button, or when the mouse is moved out of the Project area all together (onto the HTML Background area).

If the mute button is clicked to mute sound, the Volume Control is suppressed and would not show on Mute Button mouse over. When the mute button is clicked again to unmute audio, it is restored, and so is the functionality of showing the Volume Control on Mute button mouse over.

To implement this in a Captivate project that makes use of one of the Skin playbars, make sure that ‘Mute’ is checked in the Skin editor, so the Mute button is shown on the playbar.

Add ‘Volume Control’ Learning Interaction to the first slide. I’d advise to disable ‘Show Label’ option in the interaction’s settings, and match ‘Track’ and ‘Base Color’ to the overall Theme/Skin used.

Name it “VolumeControl” and place it at the very bottom of the stage right above where the Mute button will appear on run time, actually with its bounding box protruding downwards out of the stage area (see image below).

You’ll have to play a bit with the position, repeatedly checking in preview, to get it right. On run time the visible part of the volume control interaction should just be touching the playbar below, so it kind of looks like an extension of the latter. I rotated mine by -90° in my example here to make it a vertical volume control, but that’s a matter of personal taste, of course. In fact, it might actually be easier to operate when it’s horizontal.

Set the ‘VolumeControl’ object to display for the rest of the project with ‘Place Object on Top’ checked, but hide it from the output.

On slide enter – first slide, run this JavaScript on the Current Window as a simple ‘Execute JavaScript’ action or as part of an advanced action.

This should work with all playbars that come with captivate, and also with custom-made ones, providing they follow the same naming conventions for their elements.

This example here assumes that the Playbar Slider, as well as the Closed Caption button are displayed on the playbar, with the Mute button in between. In case you don’t display those specific elements on your playbar, you’d have to replace all references to “playbarSlider” in the code with the id of the next button to the left of the Mute button, and all references to “CC” with the id of the next button to the right of the Mute button (see list below).

HTML IDs of Skin Playbar elements:

• Rewind
• Play
• Backward
• Forward
• FastForward
• playbarSlider
• playbarSliderThumb
• AudioOn
• CC
• Print (available on the ‘Print’ playbar)
• Exit
• Info (available on the ‘default’ playbar)
• playbarLogo (available on the ‘default’ playbar)
• playbarBkGrnd (non-interactive background area of the playbar)

Known limitations/ issues:

• The options to size and style the ‘Volume Control’ Interaction are very limited. The overall shape cannot be altered and even attempts to simply resize it might lead to unexpected results. Theme colors are not honored and must be selected manually in a rather painful process. This alone wouldn’t be so bad if it would come by default in a design that would look less generic and had a better operability.
• I didn’t try any of this on a responsive project. No point I guess, since it’s all based on ‘mouseover’ events, which don’t exist on a touchscreen device anyway.
• The ‘Volume Control’ Interaction does not reflect any externally invoked volume level changes; say through advanced actions or js, and always defaults to a level of 100%. So if you e.g. wanted to set the volume to a default level of 75% for your course, you can do that through actions on slide enter first slide, but once the Volume Control is invoked first time, it will not reflect that and show 100% level nonetheless.
• Although ‘Place Object on Top’ is checked, some other objects on the stage might end up being rendered on top of the ‘Volume Control’ Interaction in the stacking order on run time, if those also by definition or by configuration are to be placed ‘On Top’, like e.g. other objects timed for the rest of the project and placed ‘On Top’, ‘Master Slide Objects On Top’, Overlay Slides, etc.  I also noticed that additional objects added to an object state sometimes mess up stacking order. Not sure if this would be a problem here though. At any rate, in such cases the volume control would pop up partly or fully behind those objects and might not be operational.

So one would be far better off with some custom Volume Control, e.g. built from SmartShapes or something. If only there where Slider Objects in Captivate! Maybe in a Part 3 of this blog sometime…

And of course:
There might well be a much more elegant and simple way to achieve all this with js. I’d be happy to learn.

Stay tuned for Part 2 of this blog, which will discuss the JavaScript code used for this solution.