MuiPlayer

# PC extension

TIP

mui-player-desktop-plugin.js is a player extension plug-in. The extension plug-in enhances the use of the player in PC application scenarios. It provides the ability to control the player including the mouse and keyboard, setting groups, volume adjustment, and video Functional components such as thumbnail configuration.

# installation

Install using npm:

npm i mui-player-desktop-plugin

Install using yarn:

yarn add mui-player-desktop-plugin

# start using

Introduce mui-player-desktop-plugin.js on the page , the plug-in needs to be loaded before initializing the player

<!-- Use the script tag to import -->
<script type="text/javascript" src="js/mui-player-desktop-plugin.min.js"></script>

// Use the module manager to introduce plugins
import MuiPlayerDesktopPlugin from 'mui-player-desktop-plugin'

Pass in the main configuration item plugins

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...

    plugins:[
        new MuiPlayerDesktopPlugin({
            customSetting, // Set up group configuration
            contextmenu, // Right-click menu group configuration
            thumbnails,  // Thumbnail configuration
        })
    ]
});

# Configuration options

Extension plug-in configurable API

Attribute name Types of Defaults Description
customSetting Array {functions:'Loop play',name:'loopPlay'},

{functions:'Playback speed',name:'playbackRate'}		 Custom setting group,see
customSetting.functions String Group name
customSetting.name String Group distinguished name. If the name is the same as the name in the default configuration group, the default configuration group menu will be overwritten
customSetting.model String select Group selection mode, optional switch | select
customSetting.selected Boolean false Whether the current selection is selected by default
customSetting.show Boolean true Whether to show
customSetting.zIndex Number 0 Group display level, the larger the zIndex, the higher the order of the group
customSetting.childConfig Array [] Child setting group configuration, the configuration parameters are the same as the parent setting group parameters
customSetting.onToggle Function callback( data, selected, back) The callback function after the group option is clicked, receives three parameters for processing actions:

1. data: currently selected configuration item
2. selected: function, you must manually call this function to select the item
3. back: function, call this function to trigger the return to the parent setting group, the parameter can receive a number in milliseconds to indicate the delayed return
#
contextmenu Array {name:'shortcuts',
context:'Shortcuts'},

{name:'muiplayer',
context:'MuiPlayer'}		 Customize the right-click menu, reference
contextmenu.name String Menu identification name, if the name is the same as a name in the right-click menu group, then the default menu group will be overwritten
contextmenu.context String Right-click the menu name
contextmenu.zIndex Number Group display level, the larger the zIndex, the higher the order of the group
contextmenu.show Boolean Whether to show
contextmenu.click Function callback(close) Callback function after click. [Close: function, call the function actively to close the right-click menu]
#
thumbnails Object {} Thumbnail configuration, see
#
fullScaling Number 1.2 The zoom ratio of the control size in full screen, the value is >= 1
leaveHiddenControls Boolean false Whether to hide the controls when the mouse pointer moves out of the player

# Custom settings group configuration

You can customize the configuration setting group to meet the need to add the menu. The setting menu supports two selection modes, namely switch mode and select mode.

The default setting group of the player includes loop playback and switching of the playback speed, which are not supported in live mode (live). The setting group can be customized by configuring the customSetting Option, configuration examples illustrate:

customSetting.js

export default [
	{
		functions:'Clarity',
		model:'select',
		show:true,
		zIndex:0,
		childConfig:[
			{functions:'1080P'},
			{functions:'HD',selected:true},
			{functions:'SD'},
		],
		onToggle:function(data,selected,back) {
            // Action
        }
	},
]


import customSetting from './customSetting.js'

......
new MuiPlayerDesktopPlugin({
    customSetting,
})

# Customize the right click menu

new MuiPlayerDesktopPlugin({
    contextmenu:[
        {
            name:'share',
            context:'Share',
            zIndex:0,
            show:true,
            click:function(close) {
                // Action...
            }
        },
    ],
})

# Action event monitoring

mui-player-desktop-plugin Provide the following specific behavior events：

// page fullscreen change when the trigger
mp.on('pagefull-change',function(data) {
    console.log(data.pagefull);
});
事件名 类型 函数返回 说明
pagefull-change EventHandle { pagefull } Page fullscreen change when the trigger
pip-change EventHandle { pip } Paint in picture mode toggle when the trigger

← Pc extend【Professional edition】 →