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:

Slider widget for seek and volume sliders.
Dropdown widget for caption and transcript selection menu.

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.

Page 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" 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" 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" 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="fas 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="fas fa-fw fa-volume-up" aria-hidden="true"></span></button>
    </span>
    <button type="button" class="btn" 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/3.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

Volume slider

<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" 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" 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" 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-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="fas 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="fas 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" title="Repeat" aria-label="Repeat" data-cfw-player="loop"><span class="fas fa-fw fa-redo"></span></button>
  </div>
  <audio controls>
    <source src="/assets/3.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

Volume slider

<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="embed-fluid">
    <video poster="/assets/3.0/video/niagara_falls.jpg" controls>
      <source src="/assets/3.0/video/niagara_falls.mp4" type="video/mp4" />
      <track src="/assets/3.0/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default />
      <track src="/assets/3.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" 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" 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" 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">
            <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="fas 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="fas 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" 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" 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 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 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.

Source: Tourists Looking at Niagara Falls

Volume slider

<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" role="region" aria-label="video player">
  <div class="embed-fluid">
    <video poster="/assets/3.0/video/niagara_falls.jpg" controls>
      <source src="/assets/3.0/video/niagara_falls.mp4" type="video/mp4" />
      <track src="/assets/3.0/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" />
      <track src="/assets/3.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" 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" 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" 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">
            <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="fas 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="fas 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" 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" 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 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 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/3.0/video/niagara_falls.jpg" controls>
      <source src="/assets/3.0/video/niagara_falls.mp4" data-src-describe="/assets/3.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-default" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play"></span></button>
        <button type="button" class="btn btn-default" 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">
          <label>Seek slider<input type="text" /></label>
        </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-default 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-default 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/3.0/video/niagara_falls.jpg" controls>
      <source src="/assets/3.0/video/niagara_falls.mp4" data-src-describe="/assets/3.0/video/niagara_falls-describe-en.mp4">
      <track src="/assets/3.0/video/niagara_falls-en.vtt" label="English" kind="subtitles" srclang="en" default />
      <track src="/assets/3.0/video/niagara_falls-es.vtt" label="Espa&ntilde;ol" kind="subtitles" srclang="es" />
      <track src="/assets/3.0/video/niagara_falls-describe-en.vtt" label="English Description" kind="descriptions" srclang="en" />
      <track src="/assets/3.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-default" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play"></span></button>
        <button type="button" class="btn btn-default" 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">
          <label>Seek slider<input type="text" /></label>
        </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-default 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-default 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-default 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-default" 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 optionally 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/3.0/video/niagara_falls.jpg" controls>
      <source src="/assets/3.0/video/niagara_falls.mp4">
      <track src="/assets/3.0/video/niagara_falls-en.vtt" label="English" kind="subtitles" srclang="en" default />
      <track src="/assets/3.0/video/niagara_falls-es.vtt" label="Espa&ntilde;ol" kind="subtitles" srclang="es" />
      <track src="/assets/3.0/video/niagara_falls-describe-en.vtt" label="English Description" kind="descriptions" srclang="en" />
      <track src="/assets/3.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-default" data-cfw-player="play" title="Play" aria-label="Play"><span class="fas fa-fw fa-play"></span></button>
        <button type="button" class="btn btn-default" 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">
          <label>Seek slider<input type="text" /></label>
        </span>
        <span class="player-time-duration" data-cfw-player="time-duration"></span>
      </span>
      <button type="button" class="btn btn-default 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/3.0/video/niagara_falls.jpg" controls>
      <source src="/assets/3.0/video/niagara_falls.mp4" type="video/mp4" />
      <track src="/assets/3.0/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default />
      <track src="/assets/3.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" 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" 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">
          <label>Seek slider<input type="text" /></label>
        </span>
        <span class="player-time-duration" data-cfw-player="time-duration"></span>
      </span>
      <button type="button" class="btn  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 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 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>

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. 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. If container has a child `input` element, then a slider will be inserted. 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.

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.

`.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, sliders, 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.

$('#myPlayer').on('ready.cfw.player', function () {
  // do something...
});