MuiPlayePC 端扩展-MuiPlayer简约H5播放器

MuiPlayePC 端扩展-MuiPlayer简约H5播放器



mui-player-desktop-plugin.js 是播放器扩展插件，该扩展插件增强了播放器在pc端应用场景的使用，提供了包括鼠标以及键盘对播放器的控制能力，设置组，音量调节，视频缩略图配置等功能组件。

在页面引入 mui-player-desktop-plugin.js，插件需要在初始化播放器之前加载

1. <!-- 使用 script 标签引入 -->
   
2. <script type="text/JavaScript" src="js/mui-player-desktop-plugin.min.js"></script>

复制代码

在主配置项 plugins 中传入

1. var mp = new MuiPlayer({
   
2.     container:'#mui-player',
   
3.     src:'../media/media.mp4',
   
4.     ...
   
5. 
   
6.     plugins:[
   
7.         new MuiPlayerDesktopPlugin({
   
8.             customSetting, // 设置组配置
   
9.             contextmenu, // 右键菜单组配置
   
10.             thumbnails,  // 缩略图配置
    
11.         })
    
12.     ]
    
13. });

复制代码

配置选项

扩展插件可配置API





您可以自定义配置设置组以此来满足需要添加的菜单，设置菜单支持两种选择模式，分别是开关模式（switch）和选择模式（select）。

播放器默认设置组包括循环播放以及播放速度的切换，在直播模式（live）下不支持。通过配置 customSetting Option 可自定义设置组，配置举例说明：

customSetting.js

1. export default [
   
2.         {
   
3.                 functions:'清晰度',
   
4.                 model:'select',
   
5.                 show:true,
   
6.                 zIndex:0,
   
7.                 childConfig:[
   
8.                         {functions:'蓝光1080P'},
   
9.                         {functions:'超清'},
   
10.                         {functions:'高清',selected:true},
    
11.                         {functions:'标清'},
    
12.                 ],
    
13.                 onToggle:function(data,selected,back) {
    
14.             // Action
    
15.         }
    
16.         },]

复制代码

自定义右键菜单

1. new MuiPlayerDesktopPlugin({
   
2.     contextmenu:[
   
3.         {
   
4.             name:'copyPlayUrl',
   
5.             context:'复制视频链接',
   
6.             zIndex:0,
   
7.             show:true,
   
8.             click:function(close) {
   
9.                 // Action...
   
10.             }
    
11.         },
    
12.     ],})

复制代码