Control bar options

The control bar is generic. It can embed several widgets used to interact with the player. There are two main configurations of this bar : wide with autohide property or small and sticky.

The main parameters are :

Options Type Description
sticky boolean URL to a video or audio file
height String height of the sticky control bar, in pixel
autoHide Boolean Automatically start playing the video on page load
hideDuration Number time in ms, default value is 1000
timeFormat String Time format strings 'h': for display hour
'm': for display hour and minute
's': for display hour,minute and second
'mms': for display hour,minute and second with four digit
'ms' : for display hour,minute and second with two digit
'f' : for display hour,minute and frame
framerate Number Default value is 25
widgets Object Configure the widgets

Widgets:

Below you will find a list of widgets:

Class name Description
Label To display label
TimeLabel To display current time and duration
BaseButton Simple button with callback
PauseButton Pause button
PlayButton Play button
ProgressBar Progress bar
FullscreenButton Full screen button
VolumeControlBar Volume Control Widget
ChannelVolumeControlBar Multi channel volume widget with web audio API
JogShuttleButton Widget to control playback speed

Example

$("#container").mediaPlayer({
    src: "samples-data/examples/vid/amalia01.mp4",
    controlBar:
            {
                sticky: true,
                autohide: false,
                enableProgressBar: false,
                height: 75,
                widgets:
                        {
                            left: {
                                'timelabelWidget': 'fr.ina.amalia.player.plugins.controlBar.widgets.TimeLabel',
                                'playWidget': 'fr.ina.amalia.player.plugins.controlBar.widgets.PlayButton',
                                'pauseWidget': 'fr.ina.amalia.player.plugins.controlBar.widgets.PauseButton'
                            },
                            mid: {
                                'JogShuttle': 'fr.ina.amalia.player.plugins.controlBar.widgets.JogShuttleButton'
                            },
                            right: {
                                'volume': 'fr.ina.amalia.player.plugins.controlBar.widgets.ChannelVolumeControlBar',
                                'full': 'fr.ina.amalia.player.plugins.controlBar.widgets.FullscreenButton'
                            },
                            settings: {
                                timelabelWidget: {
                                    timeFormat: 's',
                                    framerate: 20
                                },
                                sample: {
                                    style: 'fa fa-eye fa-2x',
                                    callback: 'myCallback'
                                },
                                secNext: {
                                    style: 'ajs-icon ajs-icon-control-forward',
                                    callback: 'myCallbackControl',
                                    action: 'next'
                                },
                                volume: {
                                    channelMerger: false
                                }
                            }
                        }
            }

});
                

Documentation