MediaElement.js player has inline visibility:hidden style

  • I’d love to switch my powerpress player over to MediaElement.js, but whenever I enable it and try to use it on my site it appears hidden on all major browsers. Literally hidden by an inline style. Here’s the code that WP generates for the player:

    <audio class="wp-audio-shortcode" id="audio-16754-1" preload="none" style="width: 100%; visibility: hidden;" controls="controls"><source type="audio/mpeg" src="[my url]/rain-test2.mp3?_=1"><a href="[my url]/rain-test2.mp3">[my url]/rain-test2.mp3</a></audio>

    So far I’ve tested it on my computer, phone, and tablet and the result is the same on all three. Anybody know what’s going on? Is this the result of an error, like a fallback not happening? Or is there maybe a setting in Powerpress that I might’ve accidentally disabled?

    If I inspect the code and switch the offending style to visible then the player displays and plays perfectly.

    https://www.ads-software.com/plugins/powerpress/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Shawn

    (@shawnogordo)

    You may want to try going to PowerPress >> Settings, advanced mode >> Media Appearance >> Having issues? and then select Yes, please try to fix from the dropdown menu and pressing the Save Changes button. If that doesn’t fix the problem, you can repeat the process but instead of selecting Yes, please try to fix, you could try the other options in the dropdown menu.

    Plugin Author Angelo Mandato

    (@amandato)

    You can confirm it is PowerPress specific by using the WordPress audio shortcode. [audio src=""]. I will bet the audio shortcode will have the same problem.

    Thread Starter sgreve

    (@sgreve)

    Aah, it is having the exact same problem. What does this mean? WordPress core issue? Plugin conflict?

    Plugin Author Angelo Mandato

    (@amandato)

    The visibility: hidden; is set by the player by default. Here’s a quick simplified explanation…

    1. During page load the native HTML5 player is set to not display (hidden).
    2. After page load, JavaScript will create the MediaElement.js player in the page
    3. The JavaScript controls in MediaElement.js then control the hidden HTML5 player.

    If there’s a JavaScript error in the page, or a conflict with the versions of JavaScript libraries like jQuery, number 2 does not happen. My guess is you updated or change your theme or a plugin recently which is causing the problem.

    Follow these diagnosing steps. https://create.blubrry.com/resources/powerpress/using-powerpress/diagnosing-feed-andor-player-issues-with-powerpress/ My money is a theme or plugin is using a different version of jQuery.

    Thread Starter sgreve

    (@sgreve)

    I think I’ve found the problem! But I have no idea what to do about it.

    One of my plugins is adding a very old version of jquery to the page, and that’s causing a conflict with the much newer version of jquery I’ve intentionally added. Unfortunately, that plugin is Powerpress.

    Powerpress is currently slapping jquery 1.11.1 into my header, and as far as I can tell there’s no way to disable it or even force it to use a newer version. Google has been no help in diagnosing this issue. Anybody have any advice?

    Plugin Author Angelo Mandato

    (@amandato)

    sgreve, I encourage you to use the steps on this page (https://create.blubrry.com/resources/powerpress/using-powerpress/diagnosing-feed-andor-player-issues-with-powerpress/), I’m 100% sure you misdiagnosed the problem if you diagnosed it to PowerPress loading a different version of jQuery. PowerPress calls the wp_audio_shortcode() function and lets WordPress add all the necessary jQuery to the page.

    You should be able to duplicate the problem by disabling PowerPress, then use the default WordPress “audio” shortcode to include the player in a page.

    [audio src="https://example.com/file.mp3"]

    Replace https://example.com/file.mp3 with an actual URL to one of your own mp3 files.

    If you can disable PowerPress and use the audio shortcode above without issue, then the problem is with server caching.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘MediaElement.js player has inline visibility:hidden style’ is closed to new replies.