You are here: Home Plone products collective.flowplayer_toolbar

collective.flowplayer_toolbar (0.2.1)

by Olha Pelishok last modified 2010-11-08
Released on 2010-11-05 by Luca Fabbri for Plone 3.3, Plone 4.0 under LGPL - GNU Lesser General Public License available for All platforms.
Software development stage: stable
A Plone module which add an accessible Javascript controlsbar to collective.flowplayer

How it works

This product use basic feature given to you from Flowplayer.

You must know that installing collective.flowplayer in your Plone site give you all the Flowplayer power. Unluckily the native Flowplayer's controlsbar is not always accessible (recent releases sometimes are quite usable with keyboard, but not on every browser...), but a Flowplayer plugin gives you the power to create and handle the player with an alternative Javascript controlsbar.

This product does exactly this task. The default Flash controlsbar of the player will be disabled and a new, Javascript based, ones will be shown providing some WAI ARIA attributes.

If needed you can also enable again the native Flash controlsbar (as far as only there you can access feature like the fullscreen view of your videos, due to security reasons). To do this, put to True the toolbar_flash_controlsbar property in the flowplayer_properties property sheet.

The controlsbar plugin provided is not the original one you can find on Flowplayer site, but is fixed to be more accessible and fully usable using keyboard.

You can move around using the TAB key (and SHIFT+TAB for moving backward) and trigger button with ENTER.

When the focus is on the slider that indicate the video progress, you can:

  • move forward/back for 5 seconds with right/left keys
  • move forward/back for 1 minute with PAGE DOWN/PAGE UP keys
  • move at the beginning of the video with HOME key
  • move at the end of the video with END key


If you don't care about accessibility of your videos, you don't need this package (but obviously you are a bad guy).

Accessible slider help text

When you navigate with keyboard to the slider, giving it the focus, an help tooltips will be displayed with instruction on how to use the slider with keyboard.

The help text is provided in english (default), italian and danish. To support additional languages you can modify the product source or (better) provide an additional Javascript registered after the flowplayer.accessible.controls.js:
jQuery.flowplayer_toolbar.slider_guide.xx = {
intro: 'How to control the slider',
left_arrow_label: 'Left arrow',
left_arrow_help: 'backward 5 seconds',
right_arrow_label: 'Right arrow',
right_arrow_help: 'forward 5 seconds',
page_up_label: 'Page up',
page_up_help: 'backward 1 minute',
page_down_label: 'Page down',
page_down_help: 'forward 1 minute',
home_label: 'Home key',
home_help: 'go to beginning of clip',
end_label: 'End key',
end_help: 'go to end of clip'

Change xx above with the 2-letters code of your language and customize other strings. Language loaded is taken from the language of the site (for any problem, fallback on english).

If you like, send me your translation and see them becoming part of next release.


Document Actions
Powered by Plone