ableplayer/ableplayer-wordpress

Able Player plugin for WordPress

Able Player WordPress Plugin

Able Player is a fully accessible cross-browser HTML5 media player for audio and video.

This plugin is designed to simplify the process of adding Able Player to WordPress websites.

See the Able Player WordPress plug-in site to download the latest stable version, rate the plugin, and report issues via the Support Forum.

This GitHub repo is for development between stable versions.

See the main Able Player project page for more details about Able Player.

AblePlayer for WordPress Build Environment

• Tags: html5,media,audio,video,accessibility
• Requires at least: 4.9
• Tested up to: 6.4
• Stable tag: 1.2.0
• License: MIT
• License URI: https://github.com/ableplayer/ableplayer-wordpress/blob/master/LICENSE

This is the development environment for Able Player for WordPress

Contact

Bugs or feature development contributions should be made through the GitHub repository

Authors

• Terrill Thompson

Contributors

Github Contributors

• Joe Dolson

ableplayer-wordpress's Issues

Transcript Opens as a Dialog and when closed no way to open it back

Hello,
Here is the demo video link,
https://www.digitala11y.com/academy/able-player-video-on-wordpress-demo/ The video transcript opens in a dialog below the video when navigating using screen reader, once the dialog is closed there is no way to trigger it. Is there some configuration we need to do so that transcript is presented below the video with the checkbox? I see this is not the case on wpaccessibility.day website, it works perfectly.

Missing translation files in 1.2.0

The translation files da.js and pt.js are are missing in the release.

Videos for Both HTML and Shortcode Show as Unavailable and Don't Load

Hello,
I’m attempting to use the Able Player WordPress plugin, and for some reason, the video controls are showing as unavailable for both HTML and shortcode versions. There doesn’t seem to be any errors specific to Able Player in the console. I installed the Able Player plugin through both the GUI plugin store (uninstalled it), and by pasting the unzipped ableplayer repository in the plugins folder and activating the plugin on the GUI. Firefox shows the play button, but an endless loading loop, and Chrome shows everything as unavailable. If I load the video as a file, then only the HTML video player shows with no Able Player controls.
Here’s the link to the website with all demos.
Here’s the HTML code I’m using for Youtube:

<video data-youtube-id="https://youtu.be/8yG2XnjCCB8" data-youtube-desc-id="https://youtu.be/HuyjrcDUTKY" id="able-player-1" data-able-player preload="auto" data-debug playsinline>
</video>

Here is the shortcode I’m using for Youtube:

[ableplayer youtube-id="8yG2XnjCCB8" youtube-desc-id="HuyjrcDUTKY"]

Here's the HTML Code I'm using with the MP4 File:

<video id="able-player-42" data-able-player preload="auto" poster="https://brandonkeithbiggs.a2hosted.com/audiom/wp-content/uploads/2022/07/Audiom-Logo-170x166-170x166-170x166.jpg">
<source type="video/mp4" src="https://brandonkeithbiggs.a2hosted.com/audiom/wp-content/uploads/2024/06/Intro-to-Audiom-ASL-Only.mp4" data-desc-src="https://brandonkeithbiggs.a2hosted.com/audiom/wp-content/uploads/2024/06/Intro-to-Audiom-ASL-and-Audio-Description.mp4">
</video>

Any help would be greatly appreciated!

• WordPress version = 6.4.3
• PHP version = 7.4

Videos not playing on iphone

I'm using able player 1.0 plugin for WordPress. The videos are playing just fine on my desktop computer, but they aren't playing on my iPhone. It looks like they are stuck at buffering. Please help.

Full Screen button lacks programatic label

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'

2. Click on '....'Hello,
   Here is the demo video link,
   https://www.digitala11y.com/academy/able-player-video-on-wordpress-demo/
   The full screen button is read as button by screen reader, there seem to be no programmatic label for the element.

3. Scroll down to '....'

4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Shortcode for Youtube

Hello,

I try to use the shortcode for a Youtube link but it doesn't display, I know it accepts multiple file extensions but not sure if Youtube works with it. Do you have an example link by any chance ?

Thank you !

Allow data-transcript-div to work in WP shortcode

Hey Terrill, I'm playing with the WP AblePlayer shortcode--so far so good! It would be great if the shortcode had a way to include the data-transcript-div feature in shortcode format. With our current WP theme, because there's not much room in the main container, the overflow from enabling the transcript is not ideal: https://wptest.wwu.edu/ableplayer-test/ (if you can't access this site, I'm happy to show you). It looks like data-transcript-div would work if we did static HTML, but it would be more efficient to have that attribute available in the shortcode.

It looks like height and width are available attrs, but not really keen on shrinking down the player if it's possible to just drop the transcript below the player.

Overall, love the new WP plugin! 👍

Positioning of BigPlayButton not working when player is not show on initialisation

Hi,

on one of our pages we use ableplayers inside of a <details> element:

<details style="margin:1%;">
  <summary role="button" aria-expanded="false" style="background-color: #f2f2f2; padding:1.5%;">
    <h3 style="display:inline">Begrüßung</h3>
  </summary>
  <div class="row" style="height:5%; margin:1%">
    <p>Das dritte Vernetzungstreffen des Innovationsforum Barrierefreiheit wird durch begrüßende Worte von Frau Prof. Dr. Erdmuthe Meyer zu Bexten (geschäftsführende Direktorin des BliZ) und Frau Dr. Sarah Voß-Nakkour (<strong>studium</strong>digitale) eingeleitet. </p>
  </div>
  <div style="margin:1.5%; width:100%">
  <video data-lang="de" id="video1" data-able-player="" preload="metadata" width="1280" lang="de" height="auto">
  <source type="video/mp4" src="https://www.hessenhub.de/wp-content/uploads/2020/12/Begruessung.mp4">
  <track kind="subtitles" src="https://www.hessenhub.de/wp-content/uploads/2020/12/Begruessung_final.vtt">
  </video>
  </div>
</details>

On initialisation the ableplayer is not on screen. Therefore the $BigPayButton Element get a width and height of 0 assigned. Resulting in the button being in the upper right corner, not in the center when the <details> element is expanded.

Looking into the code the changes in visibility should be caught by a MutationObserver and refreshControls('init') should be called. But testing with Firefox 78.15.0esr and Brave V1.32.106 (using Chromium 96.4664.45) (both on Windows) this is not working.

Load videos from Vimeo with ableplayer-wordpress?

I've had good experiences when loading videos and sync'd .vtt captions from my shared hosting provider (inmotionhosting) on a WordPress site, using the latest version (0.1.1) of your ableplayer-wordpress plugin. I've also been able to load videos from youtube the same way, using the "data-youtube-id" parameter. However, I'm having no success loading Vimeo-hosted videos using "data-vimeo-id", even though Vimeo is supported on your standalone ableplayer this way, as in your example at https://ableplayer.github.io/ableplayer/demos/vimeo.html.

Instead, the javascript console in my browser throws the errors below. Is loading of Vimeo videos possible, using ableplayer-wordpress?

Uncaught ReferenceError: Vimeo is not defined
at window.AblePlayer.AblePlayer.initVimeoPlayer (ableplayer.js?ver=5.2.2:15291)
at window.AblePlayer.AblePlayer.initPlayer (ableplayer.js?ver=5.2.2:1181)
at window.AblePlayer.AblePlayer.recreatePlayer (ableplayer.js?ver=5.2.2:1098)
at Object. (ableplayer.js?ver=5.2.2:494)
at Object. (jquery.js?ver=1.12.4-wp:2)
at i (jquery.js?ver=1.12.4-wp:2)
at Object.add [as done] (jquery.js?ver=1.12.4-wp:2)
at Array. (jquery.js?ver=1.12.4-wp:2)
at Function.each (jquery.js?ver=1.12.4-wp:2)
at Object. (jquery.js?ver=1.12.4-wp:2)

Thanks,
Jim

Able Player breaks Collapse elements from Bootstrap

Describe the bug

Able Player breaks Collapse elements from Bootstrap when used on the same page.

To Reproduce
Steps to reproduce the behavior:

1. Install the Able Player WordPress Plugin
2. Create a page or post with a able player video container
3. Load Bootstrap (tested with version 3.4)
4. Create a closed Collapse element on the page
5. Click on the Collapse element in order to open it.
6. Click on the Collapse element again in order to close it. It will not close again.

Expected behavior

When using Able Player and Bootstrap the Collapse elements should keep working.

Desktop (please complete the following information):

• OS: Windows 10 Education (22H2)
• Tested with Vivaldi 6.7.3329.21 (Stable channel) (64-Bit) and Firefox 115.10.0esr (64-Bit)

Additional context

Bootstrap uses $(document).on() to handle the interactions with collapsibles:

 $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
    var $this   = $(this)

    if (!$this.attr('data-target')) e.preventDefault()

    var $target = getTargetFromTrigger($this)
    var data    = $target.data('bs.collapse')
    var option  = data ? 'toggle' : $this.data()

    Plugin.call($target, option)
  })

Source

Able Player uses the same method in order to "init speech before it's needed" and disables the event listener again.

                        greeting.onstart = function(e) {
                            // utterance has started 
                            $(document).off('click'); // unbind the click event listener
                        }

Source

By removing the event listener for Able Player the event listener for Boostrap is removed as well. Therefore the collapsibles no longer works.