解决mui-player移动端时用不了PC端扩展的问题

问题描述

我们都知道mui-player移动端扩展【专业版】和PC端扩展【专业版】都是要收费的。而且也没有提供移动端普通扩展，只提供了PC端普通扩展。但是当设备是移动端时，PC端扩展就用不了了，那有没有办法解决这个问题呢？答案肯定是有的。
官方文档

找到解决方法

定位关键源码

我们解压格式化一下mui-player.min.js的源码，找到了下面这段代码（文件搜索MuiPlayerMobilePlugin就能找到）：

if ("MuiPlayerDesktopPlugin" == plugins[o].name && "window" == $method.returnSys()) {
    webpagePlugin = plugins[o];
    break
}
if ("MuiPlayerMobilePlugin" == plugins[o].name && ("androd" == $method.returnSys() || "ios" == $method.returnSys() || !0 === plugins[o].webpage)) {
    mobilePlugin = plugins[o];
    break
}

解读源码

首先plugins[o]就是我们配置里面new出来的扩展，他是判断系统端和扩展名称决定当前应该使用哪个端的扩展的。

下面的代码就是配置的PC端扩展：

const playerConfig = {
    plugins: [ 
        // 添加PC端播放插件
        typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({
            name: '',
            webpage: 0,
            fullScaling: 1.2,// 全屏控件缩放比例
            leaveHiddenControls: true, // 鼠标指针移出播放器时是否隐藏控件
            customSetting: customSetting.items, // 自定义设置组菜单
            thumbnails: globals.thumbnails, // 缩略图配置
            contextmenu: [ // 自定义右键菜单
                {
                    name: 'share',
                    context: 'Share',
                    zIndex: 0,
                    show: true,
                    click: function (close) {
                        globals.mp.showToast('Trigger Click！')
                        close()
                    }
                },
            ],
        }) : {}
    ]
}

解决方法

我们在解决的同时不能修改源码，我们需要在自己的代码里面去修改并解决这个问题。
首先源码区分了系统端，这个我们是没办法改的了，但是扩展名称我们可以修改。
换言之，当系统不是window时，我们把扩展名称改为MuiPlayerMobilePlugin，让PC端扩展生效，这样就可以解决这个问题了。

解决代码

先拷贝源码里判断系统端代码（$method.returnSys()），用来我们自己判断系统端：

export const returnSys = () => {
    var e = new function() {
        var e = navigator.userAgent;
        navigator.appVersion;
        return {
            ios: !!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            android: -1 < e.indexOf("Android") || -1 < e.indexOf("Linux"),
            iPhone: -1 < e.indexOf("iPhone"),
            iPad: -1 < e.indexOf("iPad")
        }
    };
    return e.iPhone || e.iPad || e.ios ? "ios" : e.android ? "androd" : "window"
}

在实例化MuiPlayer前，当系统不是window时，把配置里的扩展名称改为MuiPlayerMobilePlugin。

if (returnSys() !== 'window' && playerConfig.plugins.length > 0) {
playerConfig.plugins[0].name = 'MuiPlayerMobilePlugin'
}
new MuiPlayer(playerConfig)

chrome F12打开控制台，更换设备工具，选择手机，刷新页面，PC端扩展照样能正常使用。