Bring interactivity to your site with a selection of jQuery widgets (plugins) all built with accessibility and usability in mind.
Player
player.js
Player is a way to enable customized controls while using the browser's built in HTML5 audio/video player.
Currently, there is no base CSS provided by Figuration in either the figuration.css or figuration.min.css files. The examples below use CSS that is specific to our docs pages.
HTML5 Audio/Video Support
Player builds on top of the browser’s built in HTML5 <audio>/<video> player. The limits and supported media types are determined by the browser itself.
Player does not support media services such as YouTube, Vimeo, SoundCloud, and others. There are currently no plans to support these types of services.
Add an interactive transcript to your video using the transcript control. The content will be taken from the selected item and placed in another container. This content will highlight the current caption, and also allow seeking within the media item if one of the passages is clicked.
Audio Description
Improve accessibility for blind and visually impaired users by including an audio description with your video. Extend the <source> elements with a data-src-describe="" attribute pointing to the video source that contains the additional narration description. Also add a control with a data-cfw-player="description" attribute. This will allow the user to toggle the audio description version of the video on and off.
Transcript Description
Further improve accessibility for blind and visually impaired users by including the audio description narration within the interactive transcript. Add a <track kind="descriptions">with the content of the description narration. Also add matching srclang attributes to both the caption (or subtitle) track, and to the descriptions track. For example, to specify the English language, use srclang="en" on both elements.
Text-based Description
By using the same <track kind="descriptions"> as the above example, we can provide text-based descriptions outside of the transcript, and optionally make them announced by screen readers. In this case the srclang attribute will be used to set the lang attribute for screen readers.
Custom Captions
Take control over how captions are displayed by adding a container with a data-cfw-player="caption-display" attribute. This will hide the default browser captions, and instead place the content in the designated container.
Usage
To add custom controls to any <audio>/<video> element and insert the regions and controls for the custom player.
The player will use the settings of the <audio>/<video> element to determine default settings.
Keyboard Controls
space
Play / pause
/
Raise or lower the volume in 5% increments
/
Skip backwards or forwards in the timeline by 5 seconds
home
Jump to start of timeline
end
Jump to end of timline
M
Toggle mute
F
Toggle fullscreen
esc
Exit fullscreen
Note: If the player uses `input type=”range” sliders, the range keyboard commands will take precendence if the input is the currently focused element.
Regions and Controls
Regions and controls are specified by data attributes data-cfw-player="name" to seperate functionality from layout. See the following table for the names:
Name
Description
player
The main player container element.
control
Wraps the play, pause, and stop control buttons.
play
Play control button.
pause
Pause control button.
stop
Stop control button.
time
Wraps the time displays and seek progress bar or slider.
current
Current time location.
remainder
Remaining playback time.
duration
Time playback duration.
seek
Container for the seek progress bar or slider.
If container has a class of progress a progress bar will be assumed. There must be a chlid .progress-bar element in order for the progress bar to display. For example <span class="progress-bar" role="progressbar" data-cfw-player="seek-current"></span>
Otherwise, use a child <input type="range"> element for a slider style control.
seek-current
Used for seek progress bar to display current time location.
seek-buffer
Unused.
mute
Mute toggle button.
Some mobile devices do not allow for mute or volume control, citing user should have preference through physical hardware controls. Mostly this applies to iOS devices.
volume
Volume control.
Use a child element for a slider style control.
Some mobile devices do not allow for mute or volume control, citing user should have preference through physical hardware controls. Mostly this applies to iOS devices.
loop
Loop toggle button.
caption
Caption menu toggle button. Currently only supported for <video> elements.
The menu is dynamically generated based on the <track> elements, and associated with the button automatically.
Only tracks with a kind property of captions or subtitles will be added to the menu.
If there is only one valid track, then the button will act as a toggle button and not display the menu when clicked.
caption-display
Container for custom styling of captions.
If this container is present, the default browser captions will be hidden. The currently active caption content will be displayed in this container, allowing for custom styling or placement of the captions.
transcript
Transcript menu toggle button. Transcript text content is genereated from selected track item.
The menu is dynamically generated based on the <track> elements, and associated with the button automatically.
Only tracks with a kind property of captions or subtitles will be added to the menu.
If there is only one valid track, and the transcriptOption setting is false, then the button will act as a toggle button and not display the menu when clicked.
description
Audio description, using an alternate video source, toggle button.
textdescription
Audio description, using text-based description content, toggle button.
fullscreen
Fullscreen toggle button. Currently only supported for <video> elements.
Via Data Attributes
Simply add the attribute data-cfw="player" to the wrapping container.
Via JavaScript
Call the player manually with:
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-cfw-player, as in data-cfw-player-transcript-scroll=true.
Name
Type
Default
Description
mediaDescribe
boolean
false
Use the description media source.
textDescribe
integer
-1
Turn on the text-based description. The integer value reflects the track count (starting from 0) for the desired <track> element to enable. Default value is -1 which leaves the description turned off. Currently only tracks of kind="descriptions" is supported.
textDescribeAnnounce
boolean
false
When a text-based description is selected, allow the description text to be announced by a screen reader.
textDescribeVisible
boolean
true
When a text-based description is selected, display the description text.
transcript
integer
-1
Turn on the interactive transcript by default. The integer value reflects the track count (starting from 0) for the desired <track> element to enable. Default value is -1 which leaves the transcript turned off. Currently only tracks of type caption or subtitles are supported.
transcriptScroll
booelan
true
If the transcript should automatically scroll to keep the current caption in the visible area.
transcriptDescribe
booelan
true
If the transcript should show the matching descriptions track for the currently active transcript.
transcriptOption
booelan
true
If the transcript options should be shown in the transcript menu.
Methods
Note: The methods and properties as defined at HTML Audio/Video DOM Reference can be called directly on the <audio>/<video> element and will update the custom player controls accordingly.
.CFW_Player()
Activate the custom player controls.
.CFW_Player('play')
Start playing the track from the current time location.
.CFW_Player('pause')
Pause the track at current time location.
.CFW_Player('stop')
Stop playing the track and reset to the beginning.
.CFW_Player('mute')
Toggle whether or not the volume is muted.
.CFW_Player('loop', [boolean])
Toggle the loop/repeat setting. Looping will cause the the track to resume playing from the start when the end is reached.
An optional boolean value can be given as an argument to force the loop/repeat mode.
.CFW_Player('speed', rate)
Change the playback rate to the media. rate is a float value.
1.0 is normal speed
0.5 is half speed (slower)
2.0 is double speed (faster)
.CFW_Player('trackSet', trackID)
Change the caption/subtitle track. trackID is the 0-indexed array of track items defined in the <video> element. Setting trackID to -1 will turn off the captions/subtitles.
.CFW_Player('scriptSet', trackID)
Change the transcript track. trackID is the 0-indexed array of track items defined in the <video> element. Setting trackID to -1 will turn off the transcript.
.CFW_Player('fullscreen')
Toggle the fullscreen mode of the player.
.CFW_Player('description')
Toggle the use of the audio description video source.
.CFW_Player('dispose')
Remove any associated transcript, dropdowns, data, and event listeners created by the player widget.
Events
Event callbacks happen on the <audio>/<video> element, but will bubble up through the DOM and can be captured on the data-cfw="player" wrapping container if needed.
Event Type
Description
noSupport.cfw.player
This event fires if it is determined the browser does not support HTML5 audio or the specified MIME type.
ready.cfw.player
This event fires after the player item is initialized.
error.cfw.player
This event fires when there is an error that cannot be handled.
beforeTranscriptShow.cfw.player
This event fires before the transcript is shown.
afterTranscriptShow.cfw.player
This event fires after the transcript is shown.
beforeTranscriptHide.cfw.player
This event fires before the transcript is hidden/disabled.
afterTranscriptHide.cfw.player
This event fires after the transcript is hidden/disabled.
enterFullscreen.cfw.player
This event fires after the player is put into fullscreen mode.
exitFullscreen.cfw.player
This event fires after the player exits fullscreen mode.