Able Video and Audio Players
Instructions for Use
There are currently two ways to add an Able Player instance to a WordPress site:
- Enter or paste any valid HTML5 Able Player code into your web page. Full documentation is available on the Able Player project page on GitHub.
- Enter an shortcode. The shortcode is intended for adding videos hosted on YouTube or Vimeo, with captions and subtitles hosted on these services. For anything more complex, use HTML.
Able Player for Youtube Video, added as HTML, with poster.
The video has a caption and description file added to the media library and linked in the HTML. There is an image added as a video poster.
data-skin=”2020″ data-youtube-id=”BqmGZRGvKC8″ playsinline>
</video>
Able Player for Vimeo Video, added as HTML
The video has a caption and description file added to the media library and linked in the HTML. Note, to prevent malfunction, an id attribute that is different from the id values of other players on the page must be assigned when adding multiple players to a page as HTML.
Able Player for local video source, added as HTML and including a non-zero start time.
The video has a caption and description file added to the media library and linked in the HTML. Note, to prevent malfunction, an id attribute that is different from the id values of other players on the page must be assigned when adding multiple players to a page as HTML.
<video id=”able-player-3″ data-able-player data-heading-level=0
data-skin=”2020″ data-start-time=”125″
src=”https://dev.annebarrat.com/wpsandbox/wp-content/uploads/2023/05/lift.mp4″ playsinline>
<track kind=”captions” src=”https://dev.annebarrat.com/wpsandbox/wp-content/uploads/2023/05/lift.vtt” srclang=”en”>
<track kind=”descriptions” src=”https://dev.annebarrat.com/wpsandbox/wp-content/uploads/2023/05/lift_desc_en.vtt” srclang=”en”>
</video>
Able Player for YouTube Video, added as short code
When adding the player with shortcode, you can only add YouTube or Vimeo videos.
Captions must be hosted on these platforms to be included. However, users can add a described version of the video, also hosted on YouTube or Vimeo.
Please note that when users add multiple players to the page using shortcode, unique id’s will automatically be assigned to each player to prevent malfunction.
youtube-desc-id – YouTube ID of a described version of the video
vimeo-desc-id – Vimeo ID of a described version of the video.
Other optional attributes, such as start time, that can be added in the shortcode can be found can be found on the Able Player plugin page.
Able Audio Player: adding an MP3 with HTML
When adding the audio player, a unique ID is required. Add a caption track to enable the transcript to appear.
Other optional attributes, such as start time, that can be added in the shortcode can be found can be found on the Able Player plugin page.
Piano Concerto No.6 in D major (fragment) – Ludwig van Beethoven / Nicholas Cook
Able Audio Player: adding an MP3 with HTML and a non-zero start time
When adding the audio player, a unique ID is required. Add a caption track to enable the transcript to appear.
Other optional attributes, such as start time, that can be added in the shortcode can be found can be found on the Able Player plugin page.
BEETHOVEN Piano Sonata No. 21 in C major, Op. 53, Waldstein (1st Movement) / Alexander Ullman
source type=”audio/mpeg” src=”https://dev.annebarrat.com/wpsandbox/wp-content/uploads/2023/05/ullman.mp3″/>
<track kind=”captions” src=”https://dev.annebarrat.com/wpsandbox/wp-content/uploads/2023/05/ullman_en.vtt” srclang=”en”>
</audio>
Able Video Observations
- Tested compatibility up to WordPress 5.3.14.
- If the default setting of the plugin is that audio descriptions are both on and the description tray is visible, the settings should be adjusted in the ableplayer.js plugin file.
- Able Player only supports valid WebVTT files. Files may be validated at WebVTT Validator.
- The style of the player seems to need some adjustments as the description tray is overlaying the timing bar; and the progress bar overlays the containing track.
- Out of the box, when more than one player is present in a page, they will play simultaneously.
- Whenever editing the Able Players in the page, they become non-visible after saving the changes until the page is refreshed.
- The Able Player increases the accessibility of the Vimeo videos by keeping controls always visible and available to keyboard users and screenreader users.