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.
So,
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?
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:
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.
