Mobile extend【Professional edition】

TIP

mui-player-mobile-plugin.js is an extend plugin for the player. The plug-in enhances the maneuverability of the player on the mobile terminal, including the touch screen to control the progress and volume, lock the playback, and configure the main menu to switch the playback rate and loop playback. Wait.

View Demo, For computer access, please use Google browser to open the phone debugging mode:

Scan QR code

download

Value added services

The plug-in is supported by the professional version. If you need to get the plug-in, please click here to view the download and introduction of the professional version.

start using

Introduce mui-player-mobile-plugin.js on the page , the plugin needs to be loaded before initializing the player:

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

Pass in the main configuration item plugins:

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    
    plugins:[
        new MuiPlayerMobilePlugin({
            showMenuButton:true,
            ...
        })
    ]
});

Configuration options

extend plugin configurable API:

Attribute name	Types of	Defaults	Description
showMenuButton	Boolean	true	Whether to load the default main menu Tag: only valid when the phone is in landscape mode
showLock	Boolean	true	Whether to display the play lock button Tag: only valid when the phone is in landscape mode
showBattery	Boolean	auto	Whether to display the time and power, the default is auto. If the window.navigator.getBattery object is invalid, it will not be displayed, otherwise it will be displayed.
pageGetsture	Boolean	true	Whether to turn on touch screen control gestures in non-full screen state
defaultLuminance	Number	1	Specify the brightness of the default player, the value range is 0 to 1, and the default is 1. If this parameter setting is invalid in the html5+ environment, the current system brightness will be obtained by default Tag: When hotKeyConfig['luminanceHandle'] != fals is configured with
forwardRate	Number	0.1	Touch screen slide to control the forward and backward speed of the video, the effective value is 0.1 to 1
#
hotKeyConfig	Object	{}	Hotkey configuration
hotKeyConfig.processHandle	Boolean	true	Whether to turn on the left and right touch screen sliding control progress
hotKeyConfig.volumeHandle	Boolean	true	Whether to turn on the upper and lower touch screen sliding control volume, the default is the right half of the player, if you set luminanceHandle = false, then the full screen will be triggered
hotKeyConfig.luminanceHandle	Boolean	false	Whether to turn on the upper and lower touch screen sliding control brightness, the default is the left half of the player, if you set volumeHandle = false, then the full screen will be triggered
#
defaultMenuConfig	Object	{}	Default sidebar main menu configuration
defaultMenuConfig.showFillSwitch	Boolean	true	Whether to display the full screen switch button
defaultMenuConfig.showLoopSwitch	Boolean	true	Whether to display the switch button for loop playback, this parameter is invalid in live mode
defaultMenuConfig.showSpeedSwitch	Boolean	true	Whether it is allowed to switch the playback speed, this parameter is invalid in the live mode
defaultMenuConfig.showShare	Array	[]	Display the type of sharing. If the length of the value is zero or empty, the sharing portal will not be displayed. The parameter accepts 1 | 2 | 3 | 4. 1: WeChat, 2: Moments, 3: QQ, 4: Copy link
#
thumbnails	Object		Thumbnail configuration，reference
#
webpage	Boolean	false	Apply plugins on the web new

Action event monitoring

mui-player-mobile-plugin provides specific behavior events, you must add the event to handle the specified action:

// Trigger when the volume is adjusted
mp.on('volume-change',function(e) {
    mp.video().volume = e.size;
});

Event name	Types of	Function returns	Description
volume-change	EventHandle	{size}	Trigger when the volume is adjusted
luminance-change	EventHandle	{size}	Trigger when brightness is adjusted
share	EventHandle	{type}	Default sidebar main menu-triggered when the share button is clicked