Controls or Buttons not showing up

[mackecm2]

Describe the bug

The Speed Control Buttons are not initially visible on screen. Hitting F5 will make them appear but if you hit F5 again, they disappear again.

I'm just looking for some assistance in debugging this problem. There are no obvious error messages written to the console.

The Context

• WordPress Version WordPress 5.9.1
• Other plugins
  Numerous:

Advanced Custom Fields
Advanced Editor Tools
Classic Editor
Client Portal
Custom Error Pages
Duplicator
Form Maker
GDPR/CCPA Cookie Consent Banner
HTTP headers to improve web site security
Inactive Logout
Insert Headers and Footers
Insert PHP Code Snippet
jQuery Updater
Limit log in attempts reloaded
Lock User Account
Media Playback Speed
Minimum Password Strength
PDF Embedder Premium Secure
Popup Maker
Profile Builder
Remove Admin Toolbar
Simple Custom CSS and JS
Simple prevent users sharing sign-in information.
Simple User Meta Editor
Theme Check
TinyMCE Spellcheck
TLS 1.2 Compatibility Test
UpdraftPlus - Backup/Restore
User Login History
User Meta Lite
User Role Editor
Who's Logged In
Wordpress File Upload Pro
WP Better Emails
WP Content Security Policy Plugin
WP Maintenance Mode

• Theme
  running Twenty Seventeen Child theme.

• URL that we can verify and gather more info from (please do not include usernames or passwords)
  Can't do this, as it is password protected.

Screenshots

Screenshots attached, along with source code and rendered html.

Preview Assigned Translation screen.pdf
Desktop (please complete the following information):

• OS: Windows 10 Pro 10.0.19044
• Browser: Firefox 97.0.2 and Opera 84

Smartphone (please complete the following information):

N/A

Additional context

this is not a show-stopper, but I wondered if you had encountered anything like this before and could give any advice on what to look for.

[Lewiscowles1986]

Hello 👋,

I would like to start by thanking you for the wealth of information you have attached. 🏆

I cannot recall encountering this specific issue, but I think I can narrow down where this is going wrong by asking you to include a custom html block on a page or post.

As you won’t provide a public url, that is the best I can do. It’s purpose would be to include custom html with page-wide controls, which should work in any case. Will that work for you?

Also, have you tried turning off other plugins and themes, so you can know which one(s) lead to this behaviour?

lastly can I ask why a pdf for the screenshot? This issue would be a great place for all that information.

[mackecm2]

Hi Lewis,

Thanks for your prompt reply. I will crank up our dev version of the instance next week (workload permitting) and try creating a custom html block.

I've tried turning off the plugins, but the problem persisted. I haven't tried using a different theme, so I'll try that if the custom html block doesn't give me any joy.

The reason I pdf'ed all the screenshot info is because from personaI experience, I know that lazy programmers like me prefer to scroll directly to the solution without having to plough through lines of code. If I get a solution though, I will post full details here.

Thanks again for your help.

[Lewiscowles1986]

This does sound like the theme is in some way interacting with the plugin. It's a fairly simple plugin, which simply adds a template to the footer, and enqueues some JavaScript.

The custom HTML would be this snippet from https://wordpress.org/support/topic/does-this-still-work-34/

<div class="page-playback-speed-controls">
  <button type="button" class="playback-rate-button" data-value="0.5" title="Playback Speed 0.5x" aria-label="Playback Speed 0.5x">0.5x</button>
  <button type="button" class="playback-rate-button mejs-active" data-value="1" title="Playback Speed 2x" aria-label="Playback Speed 1x">1x</button>
  <button type="button" class="playback-rate-button" data-value="1.5" title="Playback Speed 1.5x" aria-label="Playback Speed 1.5x">1.5x</button>
  <button type="button" class="playback-rate-button" data-value="2" title="Playback Speed 2x" aria-label="Playback Speed 2x">2x</button>
</div>

If this does not work, then I would check if the JavaScript is enqueued. There are many plugins and themes that believe they have a "one-click way to make everything fast"... Unfortunately they usually do this poorly.

The JavaScript, tag that should be included is

<script src="/wp-content/plugins/media-playback-speed/playback-speed.js?ver=1.2.1" id="cd2-media-playback-speed-js-js"></script>