Filter for changing MediaElement.js Settings

All we need is an easy explanation of the problem, so here it is.

I am trying to change some of the settings that get loaded with MediaElement.js. I can’t seem to find a filter or hook to alter the settings that are loaded. The only way I was able to customize the settings is by opening up the core MediaElement.js file and changing the settings there.

Obviously this is less than ideal, because I’m forced to edit a core WordPress file which will be overridden on update. How can I change the settings using a filter so my settings aren’t lost?

I am trying to set

enableKeyboard: false

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Copy wp-includes/js/mediaelement/wp-mediaelement.js into your theme or plugin and make your modifications there. For example, I added some settings to force the use of native video controls on iOS & Android devices, like so:

(function ($) {
        // add mime-type aliases to MediaElement plugin support
        mejs.plugins.silverlight[0].types.push('video/x-ms-wmv');
        mejs.plugins.silverlight[0].types.push('audio/x-ms-wma');

        $(function () {
                var settings = {
                        // Put your custom MediaElement.js Player Options here...

                        alwaysShowControls: true,
                        // force iPad's native controls
                        iPadUseNativeControls: true,
                        // force iPhone's native controls
                        iPhoneUseNativeControls: true,
                        // force Android's native controls
                        AndroidUseNativeControls: true
                };

                if ( typeof _wpmejsSettings !== 'undefined' )
                        settings.pluginPath = _wpmejsSettings.pluginPath;

                $('.wp-audio-shortcode, .wp-video-shortcode').mediaelementplayer( settings );
        });

}(jQuery));

You can then use an action to dequeue the original and enqueue your modified version. If you’re doing this in a theme, add the following to your functions.php file:

add_action( 'wp_enqueue_scripts', 'my_mediaelement_settings' );
function my_mediaelement_settings() {
        wp_deregister_script( 'wp-mediaelement' );
        wp_register_script( 'wp-mediaelement', get_stylesheet_directory_uri() . "/js/wp-mediaelement.js", array( 'mediaelement' ), false, true );
}

This assumes you put your modified wp-mediaelement.js file inside a js directory within your theme.

Method 2

Since WordPress 4.4 there actually is the filter mejs_settings, which does exactly what you want.

In your case:

add_filter('mejs_settings', function ($settings) {
    $settings['enableKeyboard'] = true;
    return $settings;
});

If anyone is interested, it works like this: wp-includes/script-loader.php turns this into an inline <script> in the <head> that sets a global JS object _wpmejsSettings, which, on domReady, is passed to the .mediaelementplayer() function in wp-includes/js/mediaelement/wp-mediaelement.js.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply