Skip to content

Latest commit

 

History

History
=== Able Player, accessible HTML5 media player ===
Contributors: terrillthompson, joedolson
Plugin URI: https://github.com/ableplayer/ableplayer-wordpress
Author URI: https://www.joedolson.com
Donate link: https://www.joedolson.com/donate/
Tags: html5,media,audio,video,accessibility
Requires at least: 4.9
Tested up to: 6.9
Requires PHP: 7.4
Stable tag: 2.3.0
License: MIT
License URI: https://github.com/ableplayer/ableplayer-wordpress/blob/master/LICENSE

Accessible HTML5 media player

== Description ==

This plug-in uses Able Player, an open-source fully-accessible cross-browser HTML5 media player, to embed audio or video within your WordPress page.

== Installation ==

1. Upload the unzipped folder `ableplayer` to the `/wp-content/plugins/` directory.
1. Activate the Able Player plugin through the 'Plugins' menu in WordPress.
1. Follow the Instructions for Use.

== Screenshots ==

1. Able Player as an audio player
2. Able Player as a video player, showing captions and an auto-generated interactive transcript

== Instructions for Use ==

There are currently three ways to add an Able Player instance to a WordPress site:

1. Go to Settings > Able Player > Settings and enable the options to use Able Player for all video, audio, and playlists. Able Player will automatically replace MediaElement.js or the default WordPress video/audio blocks with Able Player.
2. Go to Settings > Able Player > Shortcodes to generate an `[ableplayer]` shortcode.
3. Enter or paste any valid HTML5 Able Player code into your web page. Full documentation is available on the [Able Player](http://ableplayer.github.io/ableplayer) project page on GitHub.

Using the media rewriting in option #1, Able Player will replace any `audio` or `video` block. Any tracks added to that block will be automatically handled, giving you support for all the standard Able Player features: captions, navigable transcripts, subtitles, chapters, and audio description.

Using option #2, you can create Able Player shortcodes that support most of the basic Able Player features, with support for Vimeo, YouTube, or local video.

Option #3 supports the full scope of Able Player features.

== The [ableplayer] shortcode ==

The `[ableplayer]` shortcode supports the following attributes.

= Required attributes (one of these) =

* `youtube-id` - 11-character YouTube ID or YouTube URL.
* `vimeo-id` - Vimeo ID or URL.
* `media-id` - An attachment ID for a media file in your WordPress media library or the URL to a hosted video.

= Additional Player Content =

* `captions` - Attachment ID or URL to `.vtt` captions file. Optional pipe separator for language code and label.
* `subtitles` - Attachment ID or URL to `.vtt` subtitles file. Optional pipe separator for language code and label.
* `chapters` - Attachment ID or URL to `.vtt` chapters file. Optional pipe separator for language code and label.
* `descriptions` - Attachment ID or URL to `.vtt` audio descriptions file. Optional pipe separator for language code and label.
* `youtube-desc-id` - YouTube URL or ID of a described version of the video
* `youtube-sign-src` - YouTube URL or ID of a sign language interpreted accompanying video
* `vimeo-desc-id` - Vimeo URL or ID of a described version of the video

All captions, subtitles, chapters, and descriptions tracks must be in `.vtt` format. The shortcode only supports a single set of values for each type of data; to add multiple tracks of the same type you can use the Video block or add custom HTML.

Either an attachment ID or a URL for your track `.vtt` is required; you can optionally add a language code and a custom label:

`captions="/path/to/file.vtt|es|Español"`

By default, the language will be your WordPress installation language, with the labels "Captions", "Subtitles", "Chapters" or "Audio Description".

= Player Options =

* `youtube-nocookie` - "true" or "false" (use "true" to embed YouTube untracked, for added privacy)
* `autoplay` - "true" or "false" (default is "false")
* `loop` - "true" or "false" (default is "false")
* `playsinline` - "true" or "false" (default is "true"). By setting to "false", some devices (e.g., iPhones) will play the video in their own media player rather than in Able Player.
* `hidecontrols` - "true" or "false" (default is "false"). Set to "true" to enable the player controls to fade away during playback. They will appear again if the user hovers over the player or pressing a key, and they are always accessible to screen reader users.
* `poster` - the URL of a poster image, displayed before the user presses Play
* `width` - a value in pixels (by default, the player will be sized to fit its container)
* `height` - a value in pixels (by default, the height of the player will be in proportion to the width)
* `heading` - The HTML heading level (1-6) of the visually hidden "Media Player" heading that precedes the player (for the benefit of screen reader users). If omitted, a heading level will be intelligently assigned based on context.
* `speed` - "animals" or "arrows" (default is "animals")
* `start` - start time at which to start playing the media, in seconds. Some browsers do not support this.
* `volume` - "0" to "10" (default is "7" to avoid overpowering screen reader audio). Some browsers do not support this.
* `seekinterval` - number of seconds to forward/rewind with the Forward and Rewind buttons. If omitted, the interval will be intelligently assigned based on length of the video.
* `nowplaying` - "true" or "false" to include a "Selected Track" section within the media player (default is "false").
* `transcript-div` - ID attribute of a target element that will contain the video transcript
* `id` - a unique id for the player (if omitted, one will be automatically assigned)

== Examples ==

= Example 1 =

This example uses HTML to add an audio player to the page, with one source (an MP3 file).
```html
  <audio id="audio1" preload="auto" data-able-player src="path_to_audio.mp3"></audio>
```

= Example 2 =

This example uses HTML to add a video player to the page, with one source (an MP4 file) and four tracks (for captions, descriptions, and chapters in English; and subtitles in Spanish).
```html
  <video id="able-player-1" data-able-player preload="auto" poster="path_to_image.jpg">
    <source type="video/mp4" src="path_to_video.mp4">
    <track kind="captions" src="path_to_captions.vtt" srclang="en" label="English">
    <track kind="subtitles" src="path_to_subtitles.vtt" srclang="es" label="Español">
    <track kind="descriptions" src="path_to_descriptions.vtt" srclang="en">
    <track kind="chapters" src="path_to_chapters.vtt" srclang="en">
  </video>
```

= Example 3 =

This example uses the shortcode to add a video player to the page, with one source (an MP4 file) and four tracks (for captions, descriptions, and chapters in English; and subtitles in Spanish). All sources are fetched as WordPress media attachments.
```html
  [ableplayer poster="21" media-id="24" captions="25|en|English" subtitles="26|es|Español" descriptions="27" chapters="28"]
```

= Example 4 =

This example uses a shortcode to add a YouTube player to the page, with two versions of the video, one with audio description and the other without (the user can toggle between the two versions using the D button).
```
  [ableplayer youtube-id="XXXXXXXXXXX" youtube-desc-id="YYYYYYYYYYY"]
```

= Example 5 =

This example uses a shortcode to add a Vimeo player to the page, with two versions of the video, one with audio description and the other without (the user can toggle between the two versions using the D button).
```
  [ableplayer vimeo-id="XXXXXXXXX" vimeo-desc-id="YYYYYYYYY"]
```

The Able Player plugin was originally created by [Terrill Thompson](https://terrillthompson.com).

== Changelog ==

= 2.3.0 =

* Add Playground previews on .org
* Update to [Able Player v4.8.0](https://github.com/ableplayer/ableplayer/releases/tag/v4.8.0).
* New feature to enable/disable cookies.
* Bug fix: Use history.pushState on tabs change.

= 2.2.1 =

* Bug fix: Speed parameter variable misnamed in JS, so icons always defaulted to arrows.
* Bug fix: Minified JS out of date.

= 2.2.0 =

* Update to [Able Player v4.7.0](https://github.com/ableplayer/ableplayer/releases/tag/v4.7.0).
* Add support for sign language sources from YouTube, new in Able Player 4.7.
* Remove `data-href` from allowed attributes in Able Player KSES.
* Trim all shortcode attributes of whitespace.
* Cast poster attribute to int if is numeric.
* Update screenshots.

= 2.1.0 =

* Privacy: Only load Vimeo player.js if used in shortcode or enabled in settings.
* Styling: Updates to shipped styling to better avoid layout conflicts.
* Bug fix: Invalid comparison set all video types to `video/mp4`.
* Bug fix: Switch to `audio` player if file loaded is audio only.
* Bug fix: Address a couple cases where attributes could be unnecessarily added to content.
* Change: Load Able Player and video scripts deferred.

= 2.0.2 =

* Bug fix: Default `nowplaying` attribute to empty, rather than false.
* Bug fix: Omit skin attribute if empty or 2020.
* Bug fix: If video mimetype is `video/quicktime`, override and set as `video/mp4`, as some browsers require this.

= 2.0.1 =

* Bug fix: Shortcode generator passed an ID, but required a URL.
* Bug fix: Layout issue in description, subtitle, and chapter fields in shortcode generator.
* Bug fix: Incorrectly marked up data sources in shortcode rendering.

= 2.0.0 =

* Feature: Settings to enable Able Player to parse `video` and `audio` blocks.
* Feature: Settings to enable Able Player to replace MediaElement.js playlists.
* Feature: Setting to disable MediaElement.js.
* Feature: Settings to configure default behaviors for Able Player.
* Feature: Shortcode generation tool to build Able Player shortcodes.
* Feature: Support for local video sources in shortcode.
* Feature: Support for captions, subtitles, chapters, and audio description tracks in shortcode.
* Feature: Automatically enable transcript div for Able Players with appropriate tracks.
* Upgrade to Able Player v4.6.0

= 1.2.2 =

* Security: Stored Cross Site Scripting vulnerability in shortcode. Props Peter Thaleikis, reported via WordFence. Also reported by Johska via Patchstack.

= 1.2.1 =

* Change: Updates Able Player to version 4.5.1.
* Security: <a href="https://github.com/ableplayer/ableplayer/security">Upstream security update</a> to add DomPurify to Able Player.
* API: Makes Able Player with DomPurify as an unincorporated dependency available, switchable using the `able_player_js` filter.

= 1.2.0 =

* Update Able Player to 4.5.0, while retaining 4.4.1 scripts.
* Make scripts sensitive to SCRIPT_DEBUG or `wp_get_environment_type()` for easier debugging.
* Add unminified versions of CSS.
* Add filters to customize JS and CSS urls.
* Add filter documentation.
* Add DEBUG constant.
* Add activation and deactivation routines.
* Update to WordPress PHPCS standards.
* Add generated documentation of hooks at http://ableplayer.github.io/ableplayer-wordpress/

= 1.1 =
* Update Able Player to 4.4.1

= 1.0 =
* Initial version