如何在mediaelement.js中安装/启用WordPress插件
MediaElement.js有很多有用的插件，如向前跳、跳回去、速度等。
根据我的理解(如果我错了，请纠正我) WordPress核心只包含MediaElement.js --没有启用这些插件。
所以,
1)如何安装(或启用) MediaElement.js插件( https://github.com/mediaelement/mediaelement-plugins)在Wordpress 5+中列出)？
2)是否有一种以上的方法？
3)如果有一种以上的方法，最佳做法是什么？
回答 1
WordPress Development用户
发布于 2022-12-27 19:04:55
已知问题/所需修改
Mediaelement插件和字符串翻译有一个小问题。我不完全确定这是核心Mediaelement的问题，还是与WordPresses实现有关。
mejs.i18n.en['mejs.time-jump-forward'] = ['Jump forward 1 second', 'Jump forward %1 seconds'];在构建过程中，Mediaelement试图运行str = str.replace('%1', pluralParam);，其中str是上面看到的数组，并且会出错(pluralParam是默认的jumpForwardInterval 30)。
error building jumpforward TypeError: n.replace is not a function或者，启用了SCRIPT_DEBUG
error building jumpforward TypeError: str.replace is not a function要解决这个问题，我们需要删除数组声明并使用一个字符串：
mejs.i18n.en['mejs.time-jump-forward'] = 'Jump forward %1 seconds';可能还有更多类似于此的问题，但上述内容将同时适用于jumpForward和跳背特性。
Implementation
主要的两件事是：
- 注册Mediaelement插件资产(JS和CSS)。
- 在需要时将资产排队。
- 在mejs设置中添加插件功能段塞。
下面的代码假设一个简单的插件，其中Mediaelement库文件位于资产/js文件夹中。
/**
* 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' );我们只想在需要时调用Mediaelement插件文件，因此我们将使用wp_audio_shortcode滤器钩进行调用。
/**
* 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 );不幸的是，使用mejs_settings过滤器钩子添加功能将删除所有现有的播放器按钮/功能。您需要显式地重新添加这些特性。有关特性的完整列表，请参见MeidaelementPlayer文档。此外，请参阅特定插件文档查找特性段塞，因为它可能不是脚本名。
/**
* 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' );特征顺序也将是它们在播放器上出现的方式。例如，如果将playpause移动到上述功能数组的末尾，播放/暂停按钮将出现在媒体播放器的末尾。
https://wordpress.stackexchange.com/questions/327599
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号