# PC 端扩展
提示
mui-player-desktop-plugin.js 是播放器扩展插件,该扩展插件增强了播放器在pc端应用场景的使用,提供了包括鼠标以及键盘对播放器的控制能力,设置组,音量调节,视频缩略图配置等功能组件。
# 安装
使用 npm 安装:
npm i mui-player-desktop-plugin
使用 yarn 安装:
yarn add mui-player-desktop-plugin
# 开始使用
在页面引入 mui-player-desktop-plugin.js,插件需要在初始化播放器之前加载
<!-- 使用 script 标签引入 -->
<script type="text/javascript" src="js/mui-player-desktop-plugin.min.js"></script>
// 使用模块管理器引入插件
import MuiPlayerDesktopPlugin from 'mui-player-desktop-plugin'
在主配置项 plugins 中传入
var mp = new MuiPlayer({
container:'#mui-player',
src:'../media/media.mp4',
...
plugins:[
new MuiPlayerDesktopPlugin({
customSetting, // 设置组配置
contextmenu, // 右键菜单组配置
thumbnails, // 缩略图配置
})
]
});
# 配置选项
扩展插件可配置API
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
customSetting | Array | {functions:'循环播放', name:'loopPlay'} {functions:'播放速度', name:'playbackRate'} | 自定义设置组,参见 |
customSetting.functions | String | 组名称 | |
customSetting.name | String | 组标识名。如该名称与默认配置组中某个名称相同,那么将重写默认配置组菜单 | |
customSetting.model | String | select | 组选择模式,可选 switch | select |
customSetting.selected | Boolean | false | 默认是否选中当前选择项 |
customSetting.show | Boolean | true | 是否显示 |
customSetting.zIndex | Number | 0 | 组显示层级,zIndex越大该组排列顺序越靠前 |
customSetting.childConfig | Array | [] | 子设置组配置,配置参数同父级设置组参数 |
customSetting.onToggle | Function | callback( data, selected, back) | 组选项点击后的回调函数,接收三个参数可供处理动作: 1、data:当前选择配置项 2、selected: 函数,必须手动调用该函数来选择项目 3、back: 函数,调用该函数触发返回父级设置组,参数可接收一个毫秒单位的数字表示延迟返回 |
# | |||
contextmenu | Array | {name:'shortcuts', context:'快捷键'}, {name:'muiplayer', context:'MuiPlayer'} | 自定义右键菜单,参考 |
contextmenu.name | String | 菜单标识名,如该名称与右击菜单组中某个名称相同,那么将重写默认菜单组 | |
contextmenu.context | String | 右击菜单名称 | |
contextmenu.zIndex | Number | 组显示层级,zIndex越大该组排列顺序越靠前 | |
contextmenu.show | Boolean | 是否显示 | |
contextmenu.click | Function | callback(close) | 点击后回调函数。【close:函数,主动调用函数可关闭右击菜单】 |
# | |||
thumbnails | Object | {} | 缩略图配置,参见 |
# | |||
fullScaling | Number | 1.2 | 全屏时控件大小缩放比,取值 >= 1 |
leaveHiddenControls | Boolean | false | 鼠标指针移出播放器时是否隐藏控件 |
# 自定义设置组配置
您可以自定义配置设置组以此来满足需要添加的菜单,设置菜单支持两种选择模式,分别是开关模式(switch)和选择模式(select)。
播放器默认设置组包括循环播放以及播放速度的切换,在直播模式(live)下不支持。通过配置 customSetting Option 可自定义设置组,配置举例说明:
customSetting.js
export default [
{
functions:'清晰度',
model:'select',
show:true,
zIndex:0,
childConfig:[
{functions:'蓝光1080P'},
{functions:'超清'},
{functions:'高清',selected:true},
{functions:'标清'},
],
onToggle:function(data,selected,back) {
// Action
}
},
]
import customSetting from './customSetting.js'
......
new MuiPlayerDesktopPlugin({
customSetting,
})
# 自定义右键菜单
new MuiPlayerDesktopPlugin({
contextmenu:[
{
name:'copyPlayUrl',
context:'复制视频链接',
zIndex:0,
show:true,
click:function(close) {
// Action...
}
},
],
})
# 动作事件监听
mui-player-desktop-plugin 提供如下特定的行为事件:
// 网页全屏改变的触发
mp.on('pagefull-change',function(data) {
console.log(data.pagefull);
});
事件名 | 类型 | 函数返回 | 说明 |
---|---|---|---|
pagefull-change | EventHandle | { pagefull } | 网页全屏模式改变的触发 |
pip-change | EventHandle | { size } | 画中画模式改变时触发 |
← API PC 端扩展【专业版】 →