MediaElement.js has a lot of useful plugins, such as jump forward, skip back, speed, etc.

From my understanding (please correct me if I am wrong) WordPress core contains only MediaElement.js -- without these plugins enabled.


1) How do I install (or enable) the MediaElement.js plugins (listed here https://github.com/mediaelement/mediaelement-plugins) in Wordpress 5+?

2) Is there more than one method?

3) If there is more than one method, what is the best practice?

  • I'm in the same boat as yourself, it's included in WordPress, but what is it actually doing and how do we leverage it in our sites? There just doesn't seem to be any documentation as to how to actually use it in WordPress.
    – jbwharris
    Commented May 17, 2019 at 15:30

1 Answer 1


Known Issues / Required Modifications

There is a slight issue with the Mediaelement plugins and string translations. I'm not entirely sure if this is an issue with core Mediaelement or if it has something to do with WordPresses implementation.

If we were to take Jump-Forward for example and take a look at its unminified JS it has:

mejs.i18n.en['mejs.time-jump-forward'] = ['Jump forward 1 second', 'Jump forward %1 seconds'];

During the build process, Mediaelement is trying to run str = str.replace('%1', pluralParam); where str is the array seen above and will error out (pluralParam being the default jumpForwardInterval 30).

error building jumpforward TypeError: n.replace is not a function

Or, with SCRIPT_DEBUG enabled

error building jumpforward TypeError: str.replace is not a function

To fix this, we need to remove the array declaration and use a string:

mejs.i18n.en['mejs.time-jump-forward'] = 'Jump forward %1 seconds';

There may be more issues similar to this, but the above would apply to both jumpForward and skipback features.


The two main things are:

  1. Register the Mediaelement plugin assets (JS and CSS).
  2. Enqueue the assets when needed.
  3. Add the plugin feature slug into the mejs settings.

The below code assumes a simple plugin where the Mediaelement library files are in an assets/js folder.

 * Register the MEJS Plugins files.
 * Jump Forward (jumpforward)
 * Skip Back (skipback)
 * @return void
function wpse327599_mejs_plugin_assets() {

    // Jump Foward
    wp_register_script( 'jump-forward', plugin_dir_url( __FILE__ ) . 'assets/js/jump-forward/jump-forward.min.js', array( 'jquery', 'wp-mediaelement' ), '2.6.3', true );
    wp_register_style( 'jump-forward', plugin_dir_url( __FILE__ ) . 'assets/js/jump-forward/jump-forward.min.css', array( 'wp-mediaelement' ), '2.6.3', 'screen' );

    // Skip Back
    wp_register_script( 'skip-back', plugin_dir_url( __FILE__ ) . 'assets/js/skip-back/skip-back.min.js', array( 'jquery', 'wp-mediaelement' ), '2.6.3', true );
    wp_register_style( 'skip-back', plugin_dir_url( __FILE__ ) . 'assets/js/skip-back/skip-back.min.css', array( 'wp-mediaelement' ), '2.6.3', 'screen' );

add_action( 'wp_enqueue_scripts', 'wpse327599_mejs_plugin_assets' );

We really only want to call the Mediaelement plugin files when needed so we'll use the wp_audio_shortcode filter hook to do so.

 * Enqueue the MEJS plugin assets as needed.
 * @param String $html
 * @param Array $atts
 * @param String $audio_file
 * @param Integer $post_id
 * @param String $library
 * @return String $html
function wpse327599_mejs_plugin_enqueue( $html, $atts, $audio_file, $post_id, $library ) {

    if( 'mediaelement' === $library && did_action( 'init' ) ) {
        wp_enqueue_script( 'jump-forward' );
        wp_enqueue_style( 'jump-forward' );

        wp_enqueue_script( 'skip-back' );
        wp_enqueue_style( 'skip-back' );

    return $html;

add_filter( 'wp_audio_shortcode', 'wpse327599_mejs_plugin_enqueue', 10, 5 );

Unfortunately, using the mejs_settings filter hook to add in features will remove all existing player buttons/features. You need to explicitly re-add these features. See the MeidaelementPlayer docs for the full list of features. Additionally, see the specific plugins docs to find the feature slug as it may not be the script name.

 * Overwrite the default MEJS settings
 * @param Array $settings
 * @return Array $settings
function wpse327599_mejs_settings( $settings ) {

    return array_merge( array(
        'features' => array(
            'playpause',        // Play / Pause Button.
            'current',          // Time elapsed while playing.
            'jumpforward',      // Jump forward 30s button.
            'progress',         // Progress bar.
            'skipback',         // Skip backward 30s button.
            'duration',         // Total time of media file.
            'volume',           // Volume control.
    ), $settings );

add_filter( 'mejs_settings', 'wpse327599_mejs_settings' );

The feature order will also be how they appear on the player. For example, if you move playpause to the end of the above features array, the play/pause button will appear at the end of the media player.

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.