Dec 14, 2009
collective.flowplayer_toolbar: adding accessibility in an unobtrusive way
The way I used to make Flowplayer use inside Plone a little more accessible, this time without branching the collective.flowplayer product!
First of all: some terms
After finishing this article I understand that people not familiar with this argument and software can be confused, so:
- Flowplayer (in capitalized form) is a Flash player for audio/video files, indipendent from the Plone technology.
- collective.flowplayer is a Plone products that use Flowplayer and give this player well integrated in Plone CMS
- collective.flowplayer 1.x is an old release family, that use Flowplayer 2.x
- collective.flowplayer 3.x is the last release family, that use Flowplayer 3
Introduction to main characters
Flowplayer is one of the most promising Flash audio/video player available right now, and we can use it in a simple way inside Plone site thanks the collective.flowplayer, a well know product that replaced the use of p4a.video in recent Plone experiences.
Flowplayer is good, and open source, but not the most accessible available player. Our work with collective.flowplayer accessibility begin when the available release was the 1.0.x version.
Fixing collective.flowplayer 1.x
The main accessibility problem of Flowplayer is its flash controlbar. Practical tests show that is not easy to handle video controls using the keyboard.
Also the example provide a patched version of the controlbar plugin for Flowplayer. This custom version add some missing HTML attributes and WAI-ARIA support.
Our target was to replicate all the feature seen in the Flowplayer 3 demo in the Flowplayer 2 environment... of course this was not so easy! However after some work we find a way to provide those features:
- a play/pause button
- a stop button (not required, but was simple to do)
- a timer display
What we really don't like was this: we found no (simple) way to write a Plone addon that work with collective.flowplayer 1.0, adding to it our new features.
We don't waste more time: we made a branch of the original collective.flowplayer 1.x, providing our new feature.
Thank you! Thank you! We have collective.flowplayer 3.x!
After a few weeks collective.flowplayer 3.x was released (I think that the developers team skipped the 2.x version for aligning the Plone product's version to the Flowplayer one).
So we came back to the original example give to us (the customer project was happy finished using our branch) just for test the new feature available and to understand is in future a new, better approach is possible.
The API's of the latest Flowplayer versions are more complete and powerful, heavily filled with the jQuery power.
This time we were able to develop something that could live and enhance the original collective.flowplayer, releasing only a new product: collective.flowplayer_toolbar.
The final result really better than the old approach; without embarrassment I can say that we did a few line of codes! The most part of the work of our new controlbar came from Flowplayer features and one more time from the great jQuery library.
You want see the "core" of this product?
The rest of the egg simply use a limited version of the original CSS of the demo page in Flowplayer site, the patched controlbar plugin (but you can use the original one without problems)... nothing more!
The jQuery presence make real the injection our new feature on existings Flowplayer instance in the page (for example, this is also working properly for our redturtle.video product). No need to patch/branch collective.flowplayer, also no need to override some views or resource of it.
This work can be also a proof-of-concept for future Flowplayer integration with additional features. The player supports many additional plugins (Yuri point my attention to the Caption Flash plugin...).