Figuration v4.4 is now available!

Player player.js

Player is a way to enable customized controls while using the browser's built in HTML5 audio/video player.

Notices

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.

W3School's HTML <audio> and <video> pages have additional information. The audio/video DOM reference page might also be useful.

Widget Dependencies

Player requires the following:

No Media Service Support

Player does not support media services such as YouTube, Vimeo, SoundCloud, and others. There are currently no plans to support these types of services.

Examples

The icons shown in the examples are from Font Awesome, and not included with Figuration.

Simple Audio Player

Source: Drumroll by Heigh-hoo

<p><small>Source: <a href="https://freesound.org/people/Heigh-hoo/sounds/19433/">Drumroll by Heigh-hoo</a></small></p>

<div data-cfw="player">
<div class="player" role="region" aria-label="audio player" data-cfw-player="player">
<span class="player-control me-0_25" data-cfw-player="control">
<button type="button" class="btn btn-icon" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon me-0_25" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fas fa-fw fa-pause" aria-hidden="true"></span></button>
</span>
<span class="player-time me-0_25" data-cfw-player="time">
<span class="player-time-current" data-cfw-player="time-current"></span>
<span class="player-seek progress" data-cfw-player="seek">
<span class="progress-bar" role="progressbar" data-cfw-player="seek-current"></span>
</span>
<span class="player-time-duration" data-cfw-player="time-duration"></span>
</span>
<span class="player-mute me-0_25" data-cfw-player="mute">
<button type="button" class="btn btn-icon player-mute-on" title="Unmute" aria-label="Unmute"><span class="fas fa-fw fa-volume-off" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon player-mute-off" title="Mute" aria-label="Mute"><span class="fas fa-fw fa-volume-up" aria-hidden="true"></span></button>
</span>
<button type="button" class="btn btn-icon" title="Repeat" aria-label="Repeat" data-cfw-player="loop"><span class="fas fa-fw fa-redo" aria-hidden="true"></span></button>
</div>
<audio controls>
<source src="/assets/4.0/audio/Drumroll-Heigh-hoo.mp3" type="audio/mpeg" />
<p>HTML5 audio not supported</p>
</audio>
</div>

Robust Audio Player

Available seek and volume sliders.

Source: Ambient Acoustic by StrangerEight

<p><small>Source: <a href="https://freesound.org/people/StrangerEight/sounds/148695/">Ambient Acoustic by StrangerEight</a></small></p>

<div data-cfw="player">
<div class="player" role="region" aria-label="audio player" data-cfw-player="player">
<span class="player-control me-0_25" data-cfw-player="control">
<button type="button" class="btn btn-icon" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fas fa-fw fa-pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="stop" title="Stop" aria-label="Stop"><span class="fas fa-fw fa-stop" aria-hidden="true"></span></button>
</span>
<span class="player-time me-0_25" data-cfw-player="time">
<span class="player-time-remainder" data-cfw-player="time-remainder"></span>
<span class="player-seek" data-cfw-player="seek">
<input type="range" class="form-range" aria-label="Seek">
</span>
<span class="player-time-duration" data-cfw-player="time-duration"></span>
</span>
<span class="player-mute me-0_25" data-cfw-player="mute">
<button type="button" class="btn btn-icon player-mute-on" title="Unmute" aria-label="Unmute"><span class="fas fa-fw fa-volume-off" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon player-mute-off" title="Mute" aria-label="Mute"><span class="fas fa-fw fa-volume-up" aria-hidden="true"></span></button>
</span>
<span class="player-volume me-0_25" data-cfw-player="volume">
<input type="range" class="form-range" aria-label="Volume">
</span>
<button type="button" class="btn btn-icon" title="Repeat" aria-label="Repeat" data-cfw-player="loop"><span class="fas fa-fw fa-redo"></span></button>
</div>
<audio controls>
<source src="/assets/4.0/audio/Ambient_Acoustic-StrangerEight.mp3" type="audio/mpeg" />
<p>HTML5 audio not supported</p>
</audio>
</div>

Video Example

Source: Tourists Looking at Niagara Falls

<p><small>Source: <a href="https://www.pexels.com/video/tourists-looking-at-niagara-falls-852305/">Tourists Looking at Niagara Falls</a></small></p>

<div data-cfw="player" class="video-wrapper">
<div class="embed-fluid">
<video poster="/assets/4.0/video/niagara_falls.jpg" controls>
<source src="/assets/4.0/video/niagara_falls.mp4" type="video/mp4" />
<track src="/assets/4.0/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default />
<track src="/assets/4.0/video/niagara_falls-es.vtt" label="Subt&iacute;tulos en espa&ntilde;ol" kind="subtitles" srclang="es" />
<p>HTML5 video not supported</p>
</video>
</div>
<div class="player-wrapper">
<div class="player row" role="region" aria-label="video player" data-cfw-player="player">
<div class="col-md-6">
<span class="player-control" data-cfw-player="control">
<button type="button" class="btn btn-icon" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fas fa-fw fa-pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="stop" title="Stop" aria-label="Stop"><span class="fas fa-fw fa-stop" aria-hidden="true"></span></button>
</span>
<span class="player-time" data-cfw-player="time">
<span class="player-time-current" data-cfw-player="time-current"></span>
<span class="player-seek" data-cfw-player="seek">
<input type="range" class="form-range" aria-label="Seek">
</span>
<span class="player-time-duration" data-cfw-player="time-duration"></span>
</span>
</div>
<div class="col-md-6">
<span class="player-mute" data-cfw-player="mute">
<button type="button" class="btn btn-icon player-mute-on" title="Unmute" aria-label="Unmute"><span class="fas fa-fw fa-volume-off" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon player-mute-off" title="Mute" aria-label="Mute"><span class="fas fa-fw fa-volume-up" aria-hidden="true"></span></button>
</span>
<span class="player-volume" data-cfw-player="volume">
<input type="range" class="form-range" aria-label="Volume">
</span>
<button type="button" class="btn btn-icon" title="Repeat" aria-label="Repeat" data-cfw-player="loop"><span class="fas fa-fw fa-redo" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="caption" title="Closed captions" aria-label="Closed captions"><span class="fas fa-fw fa-closed-captioning" aria-hidden="true"></span></button>
<span class="player-fullscreen" data-cfw-player="fullscreen">
<button type="button" class="btn btn-icon player-fullscreen-on" title="Exit fullscreen" aria-label="Exit fullscreen"><span class="fas fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon player-fullscreen-off" title="Fullscreen" aria-label="Fullscreen"><span class="fas fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
</span>
</div>
</div>
</div>
</div>

Interactive Transcript

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.

<div data-cfw="player" data-cfw-player-transcript="0" class="video-wrapper" role="region" aria-label="video player">
<div class="embed-fluid">
<video poster="/assets/4.0/video/niagara_falls.jpg" controls>
<source src="/assets/4.0/video/niagara_falls.mp4" type="video/mp4" />
<track src="/assets/4.0/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" />
<track src="/assets/4.0/video/niagara_falls-es.vtt" label="Subt&iacute;tulos en espa&ntilde;ol" kind="subtitles" srclang="es" />
<p>HTML5 video not supported</p>
</video>
</div>
<div class="player-wrapper">
<div class="player row" role="region" aria-label="video player" data-cfw-player="player">
<div class="col-md-6">
<span class="player-control" data-cfw-player="control">
<button type="button" class="btn btn-icon" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fas fa-fw fa-pause" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="stop" title="Stop" aria-label="Stop"><span class="fas fa-fw fa-stop" aria-hidden="true"></span></button>
</span>
<span class="player-time" data-cfw-player="time">
<span class="player-time-current" data-cfw-player="time-current"></span>
<span class="player-seek" data-cfw-player="seek">
<input type="range" class="form-range" aria-label="Seek">
</span>
<span class="player-time-duration" data-cfw-player="time-duration"></span>
</span>
</div>
<div class="col-md-6">
<span class="player-mute" data-cfw-player="mute">
<button type="button" class="btn btn-icon player-mute-on" title="Unmute" aria-label="Unmute"><span class="fas fa-fw fa-volume-off" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon player-mute-off" title="Mute" aria-label="Mute"><span class="fas fa-fw fa-volume-up" aria-hidden="true"></span></button>
</span>
<span class="player-volume" data-cfw-player="volume">
<input type="range" class="form-range" aria-label="Volume">
</span>
<button type="button" class="btn btn-icon" data-cfw-player="caption" title="Closed captions" aria-label="Closed captions"><span class="fas fa-fw fa-closed-captioning" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="transcript" title="Transcript captions" aria-label="Closed captions"><span class="far fa-fw fa-file-alt" aria-hidden="true"></span></button>
<span class="player-fullscreen" data-cfw-player="fullscreen">
<button type="button" class="btn btn-icon player-fullscreen-on" title="Exit fullscreen" aria-label="Exit fullscreen"><span class="fas fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon player-fullscreen-off" title="Fullscreen" aria-label="Fullscreen"><span class="fas fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
</span>
</div>
</div>
</div>
</div>

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.

<div data-cfw="player" data-cfw-player-media-describe="true" class="video-wrapper" role="region" aria-label="video player">
<div class="embed-fluid">
<video poster="/assets/4.0/video/niagara_falls.jpg" controls>
<source src="/assets/4.0/video/niagara_falls.mp4" data-src-describe="/assets/4.0/video/niagara_falls-describe-en.mp4">
</video>
</div>
<div class="player-wrapper">
<div class="player" data-cfw-player="player">
<span class="player-control me-0_5" data-cfw-player="control">
<button type="button" class="btn btn-icon" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fas fa-fw fa-pause"></span></button>
</span>
<span class="player-time me-0_5" data-cfw-player="time">
<span class="player-time-current" data-cfw-player="time-current"></span>
<span class="player-seek" data-cfw-player="seek">
<input type="range" class="form-range" aria-label="Seek">
</span>
<span class="player-time-duration" data-cfw-player="time-duration"></span>
</span>
<span class="player-describe" data-cfw-player="description">
<button type="button" class="btn btn-icon on active" title="Turn Off Audio Description" aria-label="Turn Off Audio Description"><span class="fas fa-fw fa-audio-description"></span></button>
<button type="button" class="btn btn-icon off" title="Turn On Audio Description" aria-label="Turn On Audio Description"><span class="fas fa-fw fa-audio-description"></span></button>
</span>
</div>
</div>
</div>

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.

<div data-cfw="player" data-cfw-player-transcript="0" data-cfw-player-media-describe="true" class="video-wrapper" role="region" aria-label="video player">
<div class="embed-fluid">
<video poster="/assets/4.0/video/niagara_falls.jpg" controls>
<source src="/assets/4.0/video/niagara_falls.mp4" data-src-describe="/assets/4.0/video/niagara_falls-describe-en.mp4">
<track src="/assets/4.0/video/niagara_falls-en.vtt" label="English" kind="subtitles" srclang="en" default />
<track src="/assets/4.0/video/niagara_falls-es.vtt" label="Espa&ntilde;ol" kind="subtitles" srclang="es" />
<track src="/assets/4.0/video/niagara_falls-describe-en.vtt" label="English Description" kind="descriptions" srclang="en" />
<track src="/assets/4.0/video/niagara_falls-describe-es.vtt" label="Descripción Espa&ntilde;ola" kind="descriptions" srclang="es" />
</video>
</div>
<div class="player-wrapper">
<div class="player" data-cfw-player="player">
<span class="player-control me-0_5" data-cfw-player="control">
<button type="button" class="btn btn-icon" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fas fa-fw fa-pause"></span></button>
</span>
<span class="player-time me-0_5" data-cfw-player="time">
<span class="player-time-current" data-cfw-player="time-current"></span>
<span class="player-seek" data-cfw-player="seek">
<input type="range" class="form-range" aria-label="Seek">
</span>
<span class="player-time-duration" data-cfw-player="time-duration"></span>
</span>
<span class="player-describe me-0_25" data-cfw-player="description">
<button type="button" class="btn btn-icon on active" title="Turn Off Audio Description" aria-label="Turn Off Audio Description"><span class="fas fa-fw fa-audio-description"></span></button>
<button type="button" class="btn btn-icon off" title="Turn On Audio Description" aria-label="Turn On Audio Description"><span class="fas fa-fw fa-audio-description"></span></button>
</span>
<button type="button" class="btn btn-icon me-0_25" data-cfw-player="caption" title="Closed Captions" aria-label="Closed Captions"><span class="fas fa-fw fa-closed-captioning"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="transcript" title="Transcript" aria-label="Transcript"><span class="far fa-fw fa-file-alt"></span></button>
</div>
</div>
</div>

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.

<div data-cfw="player" data-cfw-player-text-describe="2" class="video-wrapper" role="region" aria-label="video player">
<div class="embed-fluid">
<video poster="/assets/4.0/video/niagara_falls.jpg" controls>
<source src="/assets/4.0/video/niagara_falls.mp4">
<track src="/assets/4.0/video/niagara_falls-en.vtt" label="English" kind="subtitles" srclang="en" default />
<track src="/assets/4.0/video/niagara_falls-es.vtt" label="Espa&ntilde;ol" kind="subtitles" srclang="es" />
<track src="/assets/4.0/video/niagara_falls-describe-en.vtt" label="English Description" kind="descriptions" srclang="en" />
<track src="/assets/4.0/video/niagara_falls-describe-es.vtt" label="Descripción Espa&ntilde;ola" kind="descriptions" srclang="es" />
</video>
</div>
<div class="player-wrapper">
<div class="player" data-cfw-player="player">
<span class="player-control me-0_5" data-cfw-player="control">
<button type="button" class="btn btn-icon" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fas fa-fw fa-pause"></span></button>
</span>
<span class="player-time me-0_5" data-cfw-player="time">
<span class="player-time-current" data-cfw-player="time-current"></span>
<span class="player-seek" data-cfw-player="seek">
<input type="range" class="form-range" aria-label="Seek">
</span>
<span class="player-time-duration" data-cfw-player="time-duration"></span>
</span>
<button type="button" class="btn btn-icon me-0_25" data-cfw-player="textdescription" title="Text Description" aria-label="Text Description"><span class="fas fa-fw fa-font"></span></button>
</div>
</div>
</div>

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.

<div data-cfw="player" class="video-wrapper">
<div class="embed-fluid">
<video poster="/assets/4.0/video/niagara_falls.jpg" controls>
<source src="/assets/4.0/video/niagara_falls.mp4" type="video/mp4" />
<track src="/assets/4.0/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default />
<track src="/assets/4.0/video/niagara_falls-es.vtt" label="Subt&iacute;tulos en espa&ntilde;ol" kind="subtitles" srclang="es" />
<p>HTML5 video not supported</p>
</video>
<div class="player-caption-display" data-cfw-player="caption-display"></div>
</div>
<div class="player-wrapper">
<div class="player me-0_5" role="region" aria-label="video player" data-cfw-player="player">
<span class="player-control " data-cfw-player="control">
<button type="button" class="btn btn-icon" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fas fa-fw fa-pause" aria-hidden="true"></span></button>
</span>
<span class="player-time me-0_5" data-cfw-player="time">
<span class="player-time-current" data-cfw-player="time-current"></span>
<span class="player-seek" data-cfw-player="seek">
<input type="range" class="form-range" aria-label="Seek">
</span>
<span class="player-time-duration" data-cfw-player="time-duration"></span>
</span>
<button type="button" class="btn btn-icon me-0_25" data-cfw-player="caption" title="Closed captions" aria-label="Closed captions"><span class="fas fa-fw fa-closed-captioning" aria-hidden="true"></span></button>
<span class="player-fullscreen" data-cfw-player="fullscreen">
<button type="button" class="btn btn-icon player-fullscreen-on" title="Exit fullscreen" aria-label="Exit fullscreen"><span class="fas fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
<button type="button" class="btn btn-icon player-fullscreen-off" title="Fullscreen" aria-label="Fullscreen"><span class="fas fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
</span>
</div>
</div>
</div>

Automatic Pause

When the player widget is used inside of one of our other widgets, such as collapse, tabs, popovers, and modals, the player will automatically pause when the container becomes hidden, or collapsed.

Player auto pause test

Ambient Acoustic by StrangerEight

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 <input type="range"> 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:

$('#myPlayer').CFW_Player();

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.
$('#myPlayer').CFW_Player();

Methods

Method calls should be made on the data-cfw="player" wrapping container.

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.

Method Name Description
play Start playing the track from the current time location.
pause Pause the track at current time location.
stop Stop playing the track and reset to the beginning.
mute Toggle whether or not the volume is muted.
loop

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.

Optional value is passed in the form: $('#myPlayer').CFW_Player('loop', [boolean]);
speed

Change the playback rate to the media.

Called in the form: `$('#myPlayer').CFW_Player('speed', rate);

rate is a float value.
  • 1.0 is normal speed
  • 0.5 is half speed (slower)
  • 2.0 is double speed (faster)
trackSet

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.

Called in the form: $('#myPlayer').CFW_Player('trackSet', trackID);
scriptSet

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.

Called in the form: $('#myPlayer').CFW_Player('scriptSet', trackID);
fullscreen Toggle the fullscreen mode of the player.
description Toggle the use of the audio description video source.
dispose Remove any associated transcript, dropdowns, data, and event listeners created by the player widget.
$('#myPlayer').CFW_Player('play');

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.
$('#myPlayer').on('ready.cfw.player', function() {
// do something...
});