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
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 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
Reset to default 6Copy 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.
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.