Mediaelement scripts added to template by mysterious source

Just some observations:

Site one is running on WP 4.4.4 – site 2 is using 4.5.3.

The media players are being displayed in different configurations. Site one displays full controls, site 2 just a play button and time.
The themes are different, the approach to layout is also different.

But on the second site, something is mysteriously including a couple scripts from /wp-includes/js/mediaelement/, which I don’t want

The scripts that are being called on oicjapan are:

<script type='text/javascript' src='https://oicjapan.org/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=2.18.1-a'></script>
<script type='text/javascript' src='https://oicjapan.org/wp-includes/js/mediaelement/wp-mediaelement.js?ver=4.4.4'></script>

The scripts being called on danellrick are:

<script type='text/javascript' src='https://danellrick.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=2.18.1-a'></script>
<script type='text/javascript' src='https://danellrick.com/wp-includes/js/mediaelement/wp-mediaelement.min.js?ver=4.5.3'></script>

All things not being quite equal, I’m not sure what to suggest. The scripts are part of the WordPress media player.

Oh, I didn’t notice that the scripts are also called on site #1, because the basic audio tags are not being replaced by all the mejs… stuff. (I was only looking at the resulting DOM until I felt the need to check the source of site #2 because that was the one doing things I didn’t expect.)

Site one is running on WP 4.4.4 – site 2 is using 4.5.3.

Yeah, I know. Someone else is supposed to be doing that kind of maintenance on site #1 these days, but I should give that person a reminder.

The media players are being displayed in different configurations. Site one displays full controls, site 2 just a play button and time.
The themes are different, the approach to layout is also different.

It doesn’t seem to matter what theme I use, and the reason the player on site #2 only showed a few of the controls is that my CSS “.message-list .message-files audio { width:200px; }” (which is in my plugin code, not the theme) didn’t apply after the JS replaced the player. The controls were still there, just buried in the small default size. I have now applied the 200px width to .mejs-audio too, but I still don’t like the appearance of that player. Should I just get over it?

The scripts are part of the WordPress media player.

Okay, in light of that fact, can someone answer any/all of the following questions:

• Why does WP replace the shortcode with a simple <audio> tag that works fine, and then runs JS to replace that with something far more complex?
• Is there a setting somewhere to disable that “feature”? Or would that it be a bad idea for some reason?
• Why does site #1 have those scripts but is not affected by them? If it were merely the WP version difference, I wouldn’t expect the scripts to be there at all on the older one. Could it have something to do with the version of PHP? The two sites are on different hosters with very different PHP versions: site #1 is on 5.2.9 and site #2 on 5.4.45. But that doesn’t make sense – the difference is happening in the browser, not the server…

I would try to answer these questions for myself, but I haven’t found much information about mejs and why/when it does what it does.

I have now upgraded site #1 to 4.5.3, and there is no change. It still shows the simple <audio> tag while site #2 gets its markup overwritten by JS.

I believe site #1 is just loading the audio embeds without reinstantiating the MediaElement. For AJAX-added audio embeds, you need to reinstantiate the MediaElement, and enqueue its styles. More here.

If you don’t want to use the MediaElement at all, you can remove it by adding this to your functions file:

wp_deregister_script('wp-mediaelement');
wp_deregister_style('wp-mediaelement');

• This reply was modified 8 years ago by Jon Masterson.

I believe site #1 is just loading the audio embeds without reinstantiating the MediaElement.

Yes, that is indeed what is happening, but why? Why is one site reinstantiating the MediaElement and the other isn’t? (Regardless of theme or WP version – yes, I know that site #2 is now behind on updates and I just reminded the person who is responsible, but this difference has been evident through several versions.)

And why is it even called RE-instantiating when it’s doing something new and different? I don’t mind an added layer for possible future AJAX usage, but Javascript is loading a different player than the HTML original.

At the moment I’m not using AJAX to add audio, but I hesitate to hamstring WordPress – if someday (after I’ve forgotten this issue) I add a plugin that happens to depend on MediaElement, I’ll tear my hair out trying to figure out why it’s not working.