Able Player
==========
*Able Player* is a fully accessible cross-browser HTML5 media player.
To see the player in action check out the [Able Player Examples][examples] page.
Features
--------
- Supports both audio and video.
- Supports either a single audio track or an entire playlist.
- Includes a full set of player controls that are keyboard-accessible, properly labeled for screen reader users, and controllable by speech recognition users.
- Includes customizable keyboard shortcuts that enable the player to be operated from anywhere on the web page (unless there are multiple instances of the player on a given page; then the player must have focus for keyboard shortcuts to work).
- Features high contrast, scalable controls that remain visible in Windows High Contrast mode, plus an easy-to-see focus indicator so keyboard users can easily tell which control currently has focus.
- Supports closed captions and subtitles in Web Video Timed Text (WebVTT) format, the standard format recommended by the HTML5 specification.
- Supports chapters, also using WebVTT. Chapters are specific landing points in the video, allowing video content to have structure and be more easily navigated.
- Supports text-based audio description, also using WebVTT. At designated times, the description text is read aloud by browsers, or by screen readers for browsers that don't support the Web Speech API. Users can optionally set their player to pause when audio description starts in order to avoid conflicts between the description and program audio.
- Supports audio description as a separate video. When two videos are available (one with description and one without), both can be delivered together using the same player and users can toggle between the versions.
- Supports adjustable playback rate. Users who need to slow down the video in order to better process and understand its content can do so; and users who need to speed up the video in order to maintain better focus can do so.
- Includes an interactive transcript feature, built from the WebVTT chapter, caption and description files as the page is loaded. Users can click anywhere in the transcript to start playing the video (or audio) at that point. Keyboard users can also choose to keyboard-enable the transcript, so they can tab through its content one caption at a time and press enter to play the media at the desired point.
- Features automatic text highlighting within the transcript as the media plays. This feature is enabled by default but can be turned off if users find it distracting.
- Supports YouTube and Vimeo videos.
- Provides users with the ability to customize the display of captions and subtitles. Users can control the font style, size, and color of caption text; plus background color and transparency; all from the Preferences dialog. They can also choose to position captions *below* the video instead of the default position (an semi-transparent overlay).
- Supports fallback content if the media cannot be played (see section on **Fallback** for details).
- Includes extensive customization options. Many of the features described above are controlled by user preferences. This is based on the belief that every user has different needs and there are no one-size-fits-all solutions. This is the heart of universal design.
Supported Languages
-------------------
Able Player has been translated into the following languages. To add another language, see instructions below under **Contributing**.
Bahasa Indonesia (Indonesian)
Català (Catalan)
etina (Czech)
Chinese, Traditional (Taiwan)
Dansk (Danish)
Deutsch (German)
English
Espaol (Spanish)
Franais (French)
(Hebrew)
Indonesian
Italiano (Italian)
日本語 (Japanese)
Português (Portuguese)
Português - Brasil (Portuguese - Brazil)
Norsk Bokml (Norwegian)
Nederlands, Vlaams (Dutch)
Svenska (Swedish)
Türke (Turkish)
Contributing
-------------
There are many ways to contribute to Able Player, and we welcome and appreciate your help! Here are some options:
- If you spot bugs are have feature requests, please submit them to the [Issues][issues] queue.
- If you have code to contribute, please note that all development occurs on the [develop branch][develop]. This is often many commits ahead of the main branch, so please do all development from *develop*, and submit pull requests there. We particularly appreciate help with any issues in the Issues queue that have been flagged with "help wanted".
- If you are multilingual, please consider translating Able Player into another language! All labels, prompts, messages, and help text for each language are contained within a single file, contained within the */translations* directory.
Compatibility
-------------
During development, *Able Player* is routinely tested with the latest versions of the following browsers.
### Windows
- Chrome
- Firefox
- Edge
### Mac OS
- Chrome
- Firefox
- Safari
- Opera
### iOS (iPhone and iPad)
- Safari
### Android (Google Pixel)
- Chrome
- Firefox
With the release of version 4.4, we are no longer actively supporting Internet Explorer.
Dependencies
------------
*Able Player* has the following third party dependencies:
- *Able Player* uses [jQuery][]. Version 3.2.1 or higher is recommended.
The example code below uses Google’s hosted libraries; no download required.
- *Able Player* uses [js-cookie][] to store and retrieve user
preferences in cookies. The example code below uses CDN’s hosted libraries;
no download required. Prior to version 2.3, Able Player used [jquery.cookie][]
for this same purpose.
To install Able Player, copy the following files from the Able Player repo into a folder on your web server:
- build/*
- button-icons/*
- images/*
- styles/* (optional, see note below)
- translations/*
- LICENSE
The *build* folder includes minified production code (*ableplayer.min.js* and *ableplayer.min.css*).
For debugging and/or style customization purposes, human-readable source files are also available:
- build/ableplayer.js
- styles/ableplayer.css
Fallback
--------
All modern browsers have supported HTML5 media elements for many years.
However, there are still older browsers in use that don’t have this support
(e.g., Internet Explorer 9 and earlier). For these, fallback content should be provided.
Prior to version 4.0, *Able Player* used [JW Player][] as a fallback Flash player
for older browsers. However, this solution was built specifically on **JW Player 6**
which is now many versions old and difficult to find.
Also, prior to version 4.0, *Able Player* used [Modernizr][] to enable
styling of HTML5 elements in Internet Explorer 6 through 8. This too is no longer
supported, and Modernizr is no longer needed.
Instead, we recommend providing alternative content as a child of the `