Player player.js

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

Page Contents

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:

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.

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" data-cfw-player="seek">
        <span class="progress" role="progressbar" data-cfw-player="seek-current">
          <span class="progress-bar"></span>
        </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.4/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.4/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.4/video/niagara_falls.jpg" controls>
      <source src="/assets/4.4/video/niagara_falls.mp4" type="video/mp4">
      <track src="/assets/4.4/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default>
      <track src="/assets/4.4/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.4/video/niagara_falls.jpg" controls>
      <source src="/assets/4.4/video/niagara_falls.mp4" type="video/mp4">
      <track src="/assets/4.4/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en">
      <track src="/assets/4.4/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.4/video/niagara_falls.jpg" controls>
      <source src="/assets/4.4/video/niagara_falls.mp4" data-src-describe="/assets/4.4/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.4/video/niagara_falls.jpg" controls>
      <source src="/assets/4.4/video/niagara_falls.mp4" data-src-describe="/assets/4.4/video/niagara_falls-describe-en.mp4">
      <track src="/assets/4.4/video/niagara_falls-en.vtt" label="English" kind="subtitles" srclang="en" default>
      <track src="/assets/4.4/video/niagara_falls-es.vtt" label="Espa&ntilde;ol" kind="subtitles" srclang="es">
      <track src="/assets/4.4/video/niagara_falls-describe-en.vtt" label="English Description" kind="descriptions" srclang="en">
      <track src="/assets/4.4/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.4/video/niagara_falls.jpg" controls>
      <source src="/assets/4.4/video/niagara_falls.mp4">
      <track src="/assets/4.4/video/niagara_falls-en.vtt" label="English" kind="subtitles" srclang="en" default>
      <track src="/assets/4.4/video/niagara_falls-es.vtt" label="Espa&ntilde;ol" kind="subtitles" srclang="es">
      <track src="/assets/4.4/video/niagara_falls-describe-en.vtt" label="English Description" kind="descriptions" srclang="en">
      <track src="/assets/4.4/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.4/video/niagara_falls.jpg" controls>
      <source src="/assets/4.4/video/niagara_falls.mp4" type="video/mp4">
      <track src="/assets/4.4/video/niagara_falls-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default>
      <track src="/assets/4.4/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.

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 separate 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. By default a progress bar will be assumed. There must be a child [progress component](/4.4/components/progress/) with the data attribute `data-cfw-player="seek-current"` in order for the progress bar to display properly. 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 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...
});