add mediaelement.js plugins into WordPress video player control bar

Question

im trying to add SkipBack and JumpForward Plugin of mediaelement.js into my wordpress [video] tag controlbar.

so far i have added those to plugin js in a js file (videoplayerjs) like this :

/*!
 * MediaElement.js - Jump Forward Plugin
 * http://www.mediaelementjs.com/
 *
 * Wrapper that mimics native HTML5 MediaElement (audio and video)
 * using a variety of technologies (pure JavaScript, Flash, iframe)
 *
 * Copyright 2010-2017, John Dyer (http://j.hn/)
 * License: MIT
 *
 */
!function i(a,u,s){function p(t,r){if(!u[t]){if(!a[t]){var e="function"==typeof require&&require;if(!r&&e)return e(t,!0);if(m)return m(t,!0);var n=new Error("Cannot find module '"+t+"'");throw n.code="MODULE_NOT_FOUND",n}var o=u[t]={exports:{}};a[t][0].call(o.exports,function(r){return p(a[t][1][r]||r)},o,o.exports,i,a,u,s)}return u[t].exports}for(var m="function"==typeof require&&require,r=0;r<s.length;r++)p(s[r]);return p}({1:[function(r,t,e){"use strict";mejs.i18n.en["mejs.time-jump-forward"]=["Jump forward 1 second","Jump forward %1 seconds"],Object.assign(mejs.MepDefaults,{jumpForwardInterval:30,jumpForwardText:null}),Object.assign(MediaElementPlayer.prototype,{buildjumpforward:function(r,t,e,n){var o=this,i=mejs.i18n.t("mejs.time-jump-forward",o.options.jumpForwardInterval),a=mejs.Utils.isString(o.options.jumpForwardText)?o.options.jumpForwardText.replace("%1",o.options.jumpForwardInterval):i,u=document.createElement("div");u.className=o.options.classPrefix+"button "+o.options.classPrefix+"jump-forward-button",u.innerHTML='<button type="button" aria-controls="'+o.id+'" title="'+a+'" aria-label="'+a+'" tabindex="0">'+o.options.jumpForwardInterval+"</button>",o.addControlElement(u,"jumpforward"),u.addEventListener("click",function(){var r=isNaN(n.duration)?o.options.jumpForwardInterval:n.duration;if(r){var t=n.currentTime===1/0?0:n.currentTime;n.setCurrentTime(Math.min(t+o.options.jumpForwardInterval,r)),this.querySelector("button").blur()}})}})},{}]},{},[1]);



/*!
 * MediaElement.js - Skip Back Plugin
 * http://www.mediaelementjs.com/
 *
 * Wrapper that mimics native HTML5 MediaElement (audio and video)
 * using a variety of technologies (pure JavaScript, Flash, iframe)
 *
 * Copyright 2010-2017, John Dyer (http://j.hn/)
 * License: MIT
 *
 */
!function s(o,a,c){function p(e,t){if(!a[e]){if(!o[e]){var i="function"==typeof require&&require;if(!t&&i)return i(e,!0);if(u)return u(e,!0);var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}var r=a[e]={exports:{}};o[e][0].call(r.exports,function(t){return p(o[e][1][t]||t)},r,r.exports,s,o,a,c)}return a[e].exports}for(var u="function"==typeof require&&require,t=0;t<c.length;t++)p(c[t]);return p}({1:[function(t,e,i){"use strict";mejs.i18n.en["mejs.time-skip-back"]=["Skip back 1 second","Skip back %1 seconds"],Object.assign(mejs.MepDefaults,{skipBackInterval:30,skipBackText:null}),Object.assign(MediaElementPlayer.prototype,{buildskipback:function(t,e,i,n){var r=this,s=mejs.i18n.t("mejs.time-skip-back",r.options.skipBackInterval),o=mejs.Utils.isString(r.options.skipBackText)?r.options.skipBackText.replace("%1",r.options.skipBackInterval):s,a=document.createElement("div");a.className=r.options.classPrefix+"button "+r.options.classPrefix+"skip-back-button",a.innerHTML='<button type="button" aria-controls="'+r.id+'" title="'+o+'" aria-label="'+o+'" tabindex="0">'+r.options.skipBackInterval+"</button>",r.addControlElement(a,"skipback"),a.addEventListener("click",function(){if(isNaN(n.duration)?r.options.skipBackInterval:n.duration){var t=n.currentTime===1/0?0:n.currentTime;n.setCurrentTime(Math.max(t-r.options.skipBackInterval,0)),this.querySelector("button").blur()}})}})},{}]},{},[1]);

and added the script to my wp head like this on functions.php :

function site_scripts() {
    
    wp_enqueue_style( 'wp-mediaelement' );
    
    wp_enqueue_script('wp-mediaelement');
    
    wp_enqueue_script( 'videoplayerjs', get_template_directory_uri() . '/js/videoplayer.min.js', array( 'jquery', 'wp-mediaelement'  ), _S_VERSION );
    

}
add_action( 'wp_enqueue_scripts', 'site_scripts' );

and finally i've changed the mediaelementplayer features like this on my theme main js file that loads on all pages:

$(document).ready(function() {
    
    if($.fn.mediaelementplayer) {
        $('video').mediaelementplayer({
            startVolume: 1,
            features : ['playpause','current','progress','duration','tracks','volume','fullscreen','skipback','jumpforward']            
        });
    }
        
});

but i still don't have any SkipBack or JumpForward button in my video player controlbar! what am i doing wrong ? can any body give me a hint on this ?

Answer 1

You can alter the mediaelement.js feature-set using the mejs_settings hook. Settings Overview

Defaults are: playpause, current, progress, duration, tracks, volume, fullscreen.

Add the plugin to the array as needed to extend the features.

add_filter('mejs_settings', function ($settings) {
$settings['features'] = array(...,'jumpforward');
    return $settings;
});

Make sure to enqueue the plugin itself:

wp_enqueue_script( 'mejs-plugin-name', 'path_to_plugin_file', array('wp-mediaelement'), null, true );