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
Improve this question
4
  • Which of the settings precisely are you interested in changing?
    – Rarst
    Commented Mar 27, 2014 at 19:12
  • enableKeyboard: false
    – EHerman
    Commented Mar 27, 2014 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.
    – Emyr Thomas
    Commented Apr 24, 2014 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
    Commented Apr 24, 2014 at 14:52

2 Answers 2

Reset to default
6

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.

Improve this answer
3

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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