1

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 ?

3
  • Did you achieve anything on the issue? I also want to know how to add plugins. Looking forward to your reply...
    – Axel
    Jan 26, 2021 at 12:47
  • Nope, seems like nobody even on MediaElements.js's GitHub is caring...
    – ErfanMHD
    Jan 27, 2021 at 19:34
  • Hmm. It's a pitty! Thx for reply. Maybe I will try out later again. If so I will inform you as well...
    – Axel
    Jan 28, 2021 at 8:11

1 Answer 1

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 ); 

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.