将mediaelement.js插件添加到WordPress视频播放器控制栏

我正在尝试添加的SkipBack和JumpForward插件mediaelement.js 进入我的wordpress[视频]标签控制栏。

到目前为止，我已经在js文件（videoplayerjs）中添加了这些插件js，如下所示：

/*!
 * 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]);

并将脚本添加到我的wp头上，就像在函数上这样。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\' );

最后，我在所有页面上加载的主题主js文件中更改了mediaelementplayer的以下功能：

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

但我的视频播放器控制栏中仍然没有任何后退或向前跳按钮！我做错了什么？有人能给我一个提示吗？

小码农CODE

相关推荐

站点运行状况：检测到活动的PHP会话