html5中muiplayer播放器的pc插件视频清晰度的切换具体方法代码如何实现?
问题描述:
//平台:webstorm
答
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>