To get a standalone video or audio player, simply add a standard Plone
File anywhere in your site and upload a .flv or .mp3 file. You can
also add a Plone Link whose URL points to an .flv or .mp3 URL. The
‘flowplayer’ view will automatically be selected in the ‘display’
menu, which will show a video/audio player.

Create a Folder with several .mp3 or .flv files or links, or create a
Collection that lists such files or links. Then ‘flowplayer’ from the
‘display’ drop-down at the Folder/Collection level.

This will show a video/audio player that will loop through the media
in the Folder/Collection (unknown file formats will be ignored) in
order. The video player will be sized to fit the largest video in
the playlist.

There is horizontal scrollable playlist displayed under the player by default.
If you don’t want to display the playlist, switch off “showPlaylist” property in
flowplayer’s configuration.

To place a video or audio player in a portlet, use the Video Player portlet
that is installed with this product. You can choose a Folder, Collection or
File to display. When displaying a Folder or Collection, you will get a
playlist much like the one described above.

Note that the player in the portlet has got a fixed size, set with CSS.

In each of the cases above, the video player is actually created with
JavaScript as the page is loaded. This allows some degree of graceful
degradation for browsers without Flash or JavaScript, but, more importantly,
makes it easy to insert a video player anywhere, including in your content
pages.

You can also use a <div class=”autoFlowPlayer” /> around the <a /> tag if
you prefer.

This would be replaced by a video player showing the video in video-file.flv,
starting with a splash screen image from splashscreen.jpg. The image is
optional, but if it is specified, the player will be sized to be identical
to the image.

You can also add ‘minimal’ and/or ‘audio’ to the list of classes for the
outer <div /> to change the appearance of the player, or add ‘random’ to
get a randomised playlist. The splash image is optional.

Create a link to an mp3 file, e.g. out of some text. Again, place it in
its own paragraph.

Select one of the “Audio” styles from the styles drop-down. The “left”
and “right” styles will produce a small player floating to the left or
right. The “Audio” style will produce a larger player on its own line.

if your player is not displayed on the page load, but is displayed after
you click somewhere to the player container area, be sure there is no
HTML code nor text inside the player container HTML tag. Such code/text
is considered as player splash screen and player is waiting for click to
the splash.

player is correctly created only if player container is < div >
element (Kupu does it automatically if Audio and Video styles are used).
Using other containers (eg. p) is not supported currently.

Flowplayer supports a large number of configuration options. A few of these
will be set based on the markup used to render the player (e.g. the playlist
buttons will only be rendered if there is a playlist, and most controls will
be hidden in ‘minimal’ mode). Most other options can be set in the ZMI.

In portal_properties, there should be a new propertysheet called
flowplayer_properties. Options set here are passed through to the player’s
JavaScript configuration (make sure you use the right property type). For
string properties, you can use the placeholder ${portal_url} to refer to
the URL of the portal root. This is useful for things like watermark images or
player plugins.

Properties starting with word “param/” are considered as Flash configuration
properties. You may set properties like src (player flash file), wmode,
quality, allowscriptaccess etc. Just use eg. param/wmode as property name and
eg. ‘opaque’ as property value.

”’Important note”’ Since playlist configuration is a generated javascript file
included in portal_javascript, you must reload portal_javascript after global
player configuration is changed or portal_javascript must be running in debug
mode (not reccommended for production sites). Go to ZMI/portal_javascript,
scroll down and pres “Save” button after your flowplayer_properties are set.

Since FlowPlayer3 uses more complex properties and plugins infrastructure, most
of visual properties are defined as a plugin configuration (e.g. control bar is
separate plugin with own set of properties). If you want to configure
FlowPlayer3 plugin, you should define it’s flash file using property syntax eg.
plugins/controls/url which generates configuration item in form:

{
plugins : {
controls : {
url : 'VALUE OF PROPERTY'
}
}
}

To configure color of control bar volumeSliderColor, define property:
plugins/controls/volumeSliderColor set to value ‘lime’, which generates
the following config:

General informations about the configuration options may be found at the
FlowPlayer configuration page. Please note, it is not possible to specify
events in the Plone’s flowplayer_properties sheet now (eg. onBeforeFinish
event).

collective.flowplayer creates Flowplayer instance from all .autoFlowPlayer and
.playListFlowPlayer containers on the page. You may retrieve first player
eg. by:

$f() or flowplayer()

or iterate through all players on page using:

$f("*").each

To be able to configure player runtime, you must first create custom javascript
file and include this file to page or add it to portal_javascripts registry.
Since flowplayer uses jQuery to initialize itself, you must use jQuery syntax
as well. Example of js skeleton:

jq(function () {
// your javascript code goes here
})

Let’s create concerete example. The most visible one is Javascript alert:

TIP: If you are using Firefox and have the Firebug Add-on installed, then you
can try the examples yourself against every possible Flowplayer demo on
flowplayer.org or your own site. Activate Firebug console and enter:

go to ZMI - portal_setup - Upgrades tab, select collective.flowplayer:default
profile, click “Choose profile” button. There should be ‘Upgrade
collective.flowplayer (1.0 - 3.0)’ step available. Make sure step is checked
and press Upgrade button. If the upgrade step is not shown and you are sure
(even unsure) you migrated to the latest version already, press ‘Show’ button
to show old upgrades and run upgrade step manually. It should be safe to run
the upgrade step several times.

Read README.txt to check how to configure custom properties of your
Flowplayer instance