Skip to main content
Figuration v3 Preview Available!
Widgets

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.

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.

Contents

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="http://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" data-cfw-player="control">
            <button type="button" class="btn player-play" data-cfw-player="play" title="Play" aria-label="Play"><span class="fa fa-fw fa-play" aria-hidden="true"></span></button>
            <button type="button" class="btn player-pause" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fa fa-fw fa-pause" 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 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" data-cfw-player="mute">
            <button type="button" class="btn player-mute-on" title="Unmute" aria-label="Unmute"><span class="fa fa-fw fa-volume-off" aria-hidden="true"></span></button>
            <button type="button" class="btn player-mute-off" title="Mute" aria-label="Mute"><span class="fa fa-fw fa-volume-up" aria-hidden="true"></span></button>
        </span>
        <button type="button" class="btn player-loop" title="Repeat" aria-label="Repeat" data-cfw-player="loop"><span class="fa fa-fw fa-refresh" aria-hidden="true"></span></button>
    </div>
    <audio controls>
        <source src="/assets/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="http://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" data-cfw-player="control">
            <button type="button" class="btn player-play" data-cfw-player="play" title="Play" aria-label="Play"><span class="fa fa-fw fa-play" aria-hidden="true"></span></button>
            <button type="button" class="btn player-pause" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fa fa-fw fa-pause" aria-hidden="true"></span></button>
            <button type="button" class="btn player-stop" data-cfw-player="stop" title="Stop" aria-label="Stop"><span class="fa fa-fw fa-stop" aria-hidden="true"></span></button>
        </span>
        <span class="player-time" data-cfw-player="time">
            <span class="player-time-remainder" data-cfw-player="time-remainder"></span>
            <span class="player-seek" data-cfw-player="seek">
            	<label>Seek slider<input type="text" /></label>
            </span>
            <span class="player-time-duration" data-cfw-player="time-duration"></span>
        </span>
        <span class="player-mute" data-cfw-player="mute">
            <button type="button" class="btn player-mute-on" title="Unmute" aria-label="Unmute"><span class="fa fa-fw fa-volume-off" aria-hidden="true"></span></button>
            <button type="button" class="btn player-mute-off" title="Mute" aria-label="Mute"><span class="fa fa-fw fa-volume-up" aria-hidden="true"></span></button>
        </span>
        <span class="player-volume" data-cfw-player="volume">
            <label>Volume slider<input type="text" /></label>
        </span>
        <button type="button" class="btn player-loop" title="Repeat" aria-label="Repeat" data-cfw-player="loop"><span class="fa fa-fw fa-refresh"></span></button>
    </div>
    <audio controls>
        <source src="/assets/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://videos.pexels.com/videos/tourists-looking-at-niagara-falls-333">Tourists Looking at Niagara Falls</a></small></p>

<div data-cfw="player" class="video-wrapper">
    <div class="video-responsive">
        <video poster="/assets/video/niagara_falls.jpg" controls>
            <source src="/assets/video/niagara_falls.mp4" type="video/mp4" />
            <track src="/assets/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default />
            <track src="/assets/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 player-play" data-cfw-player="play" title="Play" aria-label="Play"><span class="fa fa-fw fa-play" aria-hidden="true"></span></button>
                    <button type="button" class="btn player-pause" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fa fa-fw fa-pause" aria-hidden="true"></span></button>
                    <button type="button" class="btn player-stop" data-cfw-player="stop" title="Stop" aria-label="Stop"><span class="fa 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">
                    	<label>Seek slider<input type="text" /></label>
                    </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 player-mute-on" title="Unmute" aria-label="Unmute"><span class="fa fa-fw fa-volume-off" aria-hidden="true"></span></button>
                    <button type="button" class="btn player-mute-off" title="Mute" aria-label="Mute"><span class="fa fa-fw fa-volume-up" aria-hidden="true"></span></button>
                </span>
                <span class="player-volume" data-cfw-player="volume">
                    <label>Volume slider<input type="text" /></label>
                </span>
                <button type="button" class="btn player-loop" title="Repeat" aria-label="Repeat" data-cfw-player="loop"><span class="fa fa-fw fa-refresh" aria-hidden="true"></span></button>
                <button type="button" class="btn player-caption" data-cfw-player="caption" title="Closed captions" aria-label="Closed captions"><span class="fa fa-fw fa-cc" aria-hidden="true"></span></button>
                <span class="player-fullscreen" data-cfw-player="fullscreen">
                    <button type="button" class="btn player-fullscreen-on" title="Exit fullscreen" aria-label="Exit fullscreen"><span class="fa fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
                    <button type="button" class="btn player-fullscreen-off" title="Fullscreen" aria-label="Fullscreen"><span class="fa 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.

Source: Tourists Looking at Niagara Falls

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

<div data-cfw="player" data-cfw-player-transcript="0" class="video-wrapper">
    <div class="video-responsive">
        <video poster="/assets/video/niagara_falls.jpg" controls>
            <source src="/assets/video/niagara_falls.mp4" type="video/mp4" />
            <track src="/assets/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" />
            <track src="/assets/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 player-play" data-cfw-player="play" title="Play" aria-label="Play"><span class="fa fa-fw fa-play" aria-hidden="true"></span></button>
                    <button type="button" class="btn player-pause" data-cfw-player="pause" title="Pause" aria-label="Pause"><span class="fa fa-fw fa-pause" aria-hidden="true"></span></button>
                    <button type="button" class="btn player-stop" data-cfw-player="stop" title="Stop" aria-label="Stop"><span class="fa 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">
                    	<label>Seek slider<input type="text" /></label>
                    </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 player-mute-on" title="Unmute" aria-label="Unmute"><span class="fa fa-fw fa-volume-off" aria-hidden="true"></span></button>
                    <button type="button" class="btn player-mute-off" title="Mute" aria-label="Mute"><span class="fa fa-fw fa-volume-up" aria-hidden="true"></span></button>
                </span>
                <span class="player-volume" data-cfw-player="volume">
                    <label>Volume slider<input type="text" /></label>
                </span>
                <button type="button" class="btn player-caption" data-cfw-player="caption" title="Closed captions" aria-label="Closed captions"><span class="fa fa-fw fa-cc" aria-hidden="true"></span></button>
                <button type="button" class="btn player-transcript" data-cfw-player="transcript" title="Transcript captions" aria-label="Closed captions"><span class="fa fa-fw fa-file-text-o" aria-hidden="true"></span></button>
                <span class="player-fullscreen" data-cfw-player="fullscreen">
                    <button type="button" class="btn player-fullscreen-on" title="Exit fullscreen" aria-label="Exit fullscreen"><span class="fa fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
                    <button type="button" class="btn player-fullscreen-off" title="Fullscreen" aria-label="Fullscreen"><span class="fa fa-fw fa-arrows-alt" aria-hidden="true"></span></button>
                </span>
            </div>
        </div>
    </div>
</div>

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 sliders, the slider keyboard commands will take precendence if the slider handle 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>

If container has a child input element, then a slider will be used.

seek-current Used for seek progress bar to display current time location.
seek-buffer Unused.
mute Mute toggle button.
volume

Volume control.

If container has a child input element, then a slider will be inserted.

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.

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.

fullscreen Fullscreen toggle button. Currently only supported for <video> elements.

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.

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
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.
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.

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

.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.

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...
});