html5中muiplayer播放器的pc插件视频清晰度的切换具体方法代码如何实现？

Question

//平台：webstorm

Answer 1

MuiPlayerDesktopPlugin的onToggle函数，点击时a为{functions: "1080P}这个对应的项，自己通过a的functions获取对应视频网址后，调用reloadUrl方法加载视频网址就行

示例大概如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~

<link rel="stylesheet" href="https://muiplayer.js.org/css/mui-player.min.css">
<div style="width: 600px; margin: 30px auto;height:400px">
    <div id="mui-player"></div>
</div>
<script src="https://muiplayer.js.org/js/mui-player.min.js"></script>
<script src="https://muiplayer.js.org/js/mui-player-desktop-plugin.min.js"></script>
<script>
    //视频网址，和customSetting中childConfig项的functions值对应
    var address = {
        'HD': 'https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/media/media.mp4',
        'SD': 'https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/media/media_sd.mp4'
    };
    var customSetting = [{
        functions: "清晰度",
        model: "select",
        show: !0,
        zIndex: 0,
        childConfig: [
            {
                functions: "1080p"
            },
            {
                functions: "HD",
                selected: !0
            },
            {
                functions: "SD"
            }
        ],
        onToggle: function (data, selected, back) {
            
            if (address[data.functions]) {//有配置对应的视频网址
                selected();//选中视频
                
                var video = mp.video();//获取实例对应的video标签
                var currentTime = video.currentTime;//获取视频当前已播放到的位置
                var paused = video.paused;//视频是否在暂停状态
                mp.once('ready', function () {//注册只执行一次的ready事件，还原视频状态
                    var video = mp.video();
                    video.currentTime = currentTime;//还原到原来的位置
                    video[paused ? 'pause' : 'play']();//如果是播放状态就继续播放，否则暂停
                    //在durationchange事件中执行back否则控制台会出错（Uncaught TypeError: Cannot read properties of null (reading 'querySelector')，但是没有什么影响
           
                    video.addEventListener("durationchange", (function (t) { back() }), { once: !0 });

                });
                mp.reloadUrl(address[data.functions]);//加载对应清晰度视频

            }
            else mp.showToast(data.functions + "视频网址未配置！");
            
        }
    }];
    var config = {
        container: "#mui-player",
        src: address.HD,
        title: "",
        poster: "https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/poster.jpg",
        autoplay: !1,
        autoFit: !0,
        live: !1,
        objectFit: "cover",
        videoAttribute: [{
            attrKey: "webkit-playsinline",
            attrValue: ""
        }, {
            attrKey: "playsinline",
            attrValue: ""
        }, {
            attrKey: "x5-playsinline",
            attrValue: ""
        }, {
            attrKey: "t7-video-player-type",
            attrValue: "inline"
        }, {
            attrKey: "x5-video-player-type",
            attrValue: "h5-page"
        }, {
            attrKey: "x-webkit-airplay",
            attrValue: "allow"
        }, {
            attrKey: "controlslist",
            attrValue: "nodownload"
        }],
        custom: {
            headControls: [{
                slot: "github",
                click: function (t) {
                    window.open("https://github.com/muiplayer/hello-muiplayer")
                },
                style: {}
            }, {
                slot: "gitee",
                click: function (t) {
                    window.open("https://gitee.com/muiplayer/hello-muiplayer")
                },
                style: {}
            }]
        },
        plugins: [
            new MuiPlayerDesktopPlugin({
                customSetting: customSetting,
                thumbnails: {
                    preview: ["https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/output_160x90_10x10_001.jpg"],
                    tile: [10, 10],
                    scale: [160, 90]
                },
                contextmenu: []
            })]
    }
    var mp = new MuiPlayer(config);
</script>