6

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
  • Which of the settings precisely are you interested in changing? – Rarst Mar 27 '14 at 19:12
  • enableKeyboard: false – EHerman Mar 27 '14 at 19:25
  • Did you find a solution for this? I need to do something similar to use iOS/Android native controls on the audio/video player. – Emzo Apr 24 '14 at 11:40
  • I never was able to find a solution to this. I tried multiple solutions including separate js/jQuery functions, none of it worked as I needed it too. Surprised no one ever wrote a response here. – EHerman Apr 24 '14 at 14:52
5

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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.