MuiPlayer

https://muiplayer.js.org/zh/guide
Admin
MuiPlayer is an HTML5 video playback plugin offering beautifully designed and operable controls for...
Tokens:23,866
Snippets:136
Trust Score:8.1
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Mui Player Desktop Plugin via npm

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Install the mui-player-desktop-plugin using npm. This is a prerequisite for using the plugin in your project.

```bash
npm i mui-player-desktop-plugin
```

--------------------------------

### Install Mui Player Desktop Plugin via yarn

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Install the mui-player-desktop-plugin using yarn. This is an alternative to npm for package management.

```bash
yarn add mui-player-desktop-plugin
```

--------------------------------

### Initialize MUI Player with Subtitle Configuration

Source: https://muiplayer.js.org/zh/guide/subtitle

Demonstrates how to initialize MUI Player with subtitle tracks and custom styles. This example shows how to include multiple subtitle files in different languages (English, German, Spanish) and apply a white text color with a black text shadow for subtitles.

```javascript
var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    
    subtitle{
        tracks:[
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-en.vtt',
				label:'英语',
				srclang:'en',
				default:true,
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-de.vtt',
				label:'德语',
				srclang:'de',
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-es.vtt',
				label:'西班牙语',
				srclang:'es',
            }
        ],
        styles:{
			color:'#FFFFFF',
			background:'transparent',
			textShadow:'0px 0px 1px #000000',
		},
    }
});

```

--------------------------------

### Custom Setting Group Configuration Example

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Define custom setting groups for the player extension. This example shows how to create a 'clarity' setting group with multiple options and an onToggle callback.

```javascript
export default [
	{
		functions:'清晰度',
		model:'select',
		show:true,
		zIndex:0,
		childConfig:[
			{functions:'蓝光1080P'},
			{functions:'超清'},
			{functions:'高清',selected:true},
			{functions:'标清'},
		],
		onToggle:function(data,selected,back) {
            // Action
        }
	},
]
```

--------------------------------

### Custom Context Menu Configuration

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Configure custom context menu items for the player. This example adds a 'copyPlayUrl' option with a click handler.

```javascript
new MuiPlayerDesktopPlugin({
    contextmenu:[
        {
            name:'copyPlayUrl',
            context:'复制视频链接',
            zIndex:0,
            show:true,
            click:function(close) {
                // Action...
            }
        },
    ],
})
```

--------------------------------

### Listen to Mui-Player Events

Source: https://muiplayer.js.org/zh/guide/api

This example demonstrates how to listen for and handle various events emitted by the Mui-Player instance. Events include 'ready', 'duration-change', 'seek-progress', 'fullscreen-change', 'controls-toggle', 'error', and 'destroy'.

```javascript
var mp = new MuiPlayer(option);

// Listen for the player being ready
mp.on('ready', function(event) {
    console.log('Player is ready:', event);
});

// Listen for fullscreen changes
mp.on('fullscreen-change', function(event) {
    console.log('Fullscreen changed:', event);
});

// Listen for errors
mp.on('error', function(event) {
    console.error('Player error:', event);
});
```

--------------------------------

### MuiPlayer Desktop Plugin Installation

Source: https://muiplayer.js.org/zh/guide/plus-desktop-plugin

Instructions on how to include and initialize the MuiPlayer Desktop Plugin in your web project.

```APIDOC
## Installation

Include the **mui-player-desktop-plugin.js** script before initializing the MuiPlayer.

### HTML
```html
<script type="text/javascript" src="js/mui-player-desktop-plugin.min.js"></script>
```

### JavaScript Initialization

Pass the plugin in the `plugins` array during MuiPlayer initialization:

```javascript
var mp = new MuiPlayer({
    container: '#mui-player',
    src: '../media/media.mp4',
    // ... other configurations
    
    plugins: [
        new MuiPlayerDesktopPlugin({
            key: 'YOUR_PLUGIN_SECRET_KEY',
            // ... other plugin options
        })
    ]
});
```
```

--------------------------------

### Initialize Mui Player with Desktop Plugin

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Initialize MuiPlayer and include the MuiPlayerDesktopPlugin in the plugins array of the main configuration. You can pass custom settings, context menus, and thumbnail configurations to the plugin.

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

    plugins:[
        new MuiPlayerDesktopPlugin({
            customSetting, // 设置组配置
            contextmenu, // 右键菜单组配置
            thumbnails,  // 缩略图配置
        })
    ]
});
```

--------------------------------

### Import and Use Custom Settings

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Import your custom setting configuration and pass it to the MuiPlayerDesktopPlugin constructor. This allows you to apply your defined settings to the player.

```javascript
import customSetting from './customSetting.js'

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

--------------------------------

### Initialize MuiPlayer with Mobile Plugin Configuration

Source: https://muiplayer.js.org/zh/guide/plus-mobile-plugin

Demonstrates how to initialize MuiPlayer and integrate the mobile plugin by passing it within the plugins array in the main configuration. Customizes the mobile experience by enabling the menu button.

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

--------------------------------

### Include Plugin via Script Tag

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Include the mui-player-desktop-plugin.js file in your HTML using a script tag before initializing the player. This makes the plugin available globally.

```html
<script type="text/javascript" src="js/mui-player-desktop-plugin.min.js"></script>
```

--------------------------------

### MuiPlayer Mobile Plugin Integration

Source: https://muiplayer.js.org/zh/guide/plus-mobile-plugin

This section explains how to integrate the MuiPlayer mobile plugin into your project by including the script and initializing the MuiPlayer with the plugin.

```APIDOC
## Integrating the MuiPlayer Mobile Plugin

### Description
To use the mobile plugin, first include the `mui-player-mobile-plugin.js` script in your HTML. Then, initialize MuiPlayer and pass an instance of `MuiPlayerMobilePlugin` within the `plugins` array in the player's configuration.

### Method
Not applicable (JavaScript integration)

### Endpoint
Not applicable

### Parameters
#### Request Body (MuiPlayer Initialization)
- **container** (string) - Required - The CSS selector for the player container.
- **src** (string) - Required - The URL of the video source.
- **plugins** (Array) - Required - An array to hold plugin instances.
  - **MuiPlayerMobilePlugin** (Object) - Required - An instance of the mobile plugin with its configuration options.

### Request Example
```javascript
<script type="text/javascript" src="js/mui-player-mobile-plugin.min.js"></script>

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

### Response
#### Success Response
Player initialized with mobile features enabled.

#### Response Example
Not applicable (client-side initialization)
```

--------------------------------

### Handle Volume Change Event in MuiPlayer Mobile Plugin

Source: https://muiplayer.js.org/zh/guide/plus-mobile-plugin

This example shows how to listen for the 'volume-change' event emitted by the MuiPlayer mobile plugin and update the video player's volume accordingly. The event provides the new volume level.

```javascript
mp.on('volume-change',function(e) {
    mp.video().volume = e.size;
});
```

--------------------------------

### Subtitle Configuration API

Source: https://muiplayer.js.org/zh/guide/subtitle

This section outlines the properties available for configuring video subtitles, including track details and styling options.

```APIDOC
## Subtitle Configuration API

This API allows you to configure video subtitles using the `subtitle` object, which accepts `tracks` and `styles` properties.

### Properties

#### `subtitle` Object

- **tracks** (Array) - Optional - A list of subtitle track configurations.
  - **kind** (String) - Optional - Specifies the type of text track. Defaults to 'subtitles'.
  - **src** (String) - Required - The URL of the WebVTT subtitle file.
  - **default** (Boolean) - Optional - If true, this subtitle will be displayed by default. Defaults to false.
  - **label** (String) - Optional - The language name displayed in the user interface for this subtitle.
  - **srclang** (String) - Optional - The language code for the subtitle track (e.g., 'en', 'zh-cn').

- **styles** (Object) - Optional - Custom styles for the subtitles. See [supported styles](opens new window) for details.
  - **color** (String) - Example: '#FFFFFF'
  - **background** (String) - Example: 'transparent'
  - **textShadow** (String) - Example: '0px 0px 1px #000000'

### Configuration Example

```javascript
var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    subtitle:{
        tracks:[
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-en.vtt',
				label:'English',
				srclang:'en',
				default:true,
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-de.vtt',
				label:'German',
				srclang:'de',
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-es.vtt',
				label:'Spanish',
				srclang:'es',
            }
        ],
        styles:{
			color:'#FFFFFF',
			background:'transparent',
			textShadow:'0px 0px 1px #000000',
		},
    }
});
```
```

--------------------------------

### Include Plugin via Module Manager

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Import the MuiPlayerDesktopPlugin using a module manager like ES modules. This is the standard way to include plugins in modern JavaScript projects.

```javascript
import MuiPlayerDesktopPlugin from 'mui-player-desktop-plugin'
```

--------------------------------

### MuiPlayer Mobile Plugin Configuration Options

Source: https://muiplayer.js.org/zh/guide/plus-mobile-plugin

This section lists and describes the configuration options available for the MuiPlayer mobile plugin, allowing customization of its behavior and appearance.

```APIDOC
## MuiPlayer Mobile Plugin Configuration Options

### Description
The mobile plugin offers several configuration options to customize its functionality and UI elements.

### Method
Not applicable (Configuration object)

### Endpoint
Not applicable

### Parameters
#### Configuration Options
- **showMenuButton** (Boolean) - Default: `true` - Whether to display the default main menu button. Only effective in landscape mode.
- **showLock** (Boolean) - Default: `true` - Whether to display the playback lock button. Only effective in landscape mode.
- **showBattery** (Boolean) - Default: `auto` - Whether to display the time and battery status. Defaults to `auto`; displays if `window.navigator.getBattery` is available.
- **pageGetsture** (Boolean) - Default: `true` - Whether to enable touch control gestures when not in full-screen mode.
- **defaultLuminance** (Number) - Default: `1` - Sets the default player brightness (0 to 1). In `html5+` environments, this is ignored and system brightness is used. Effective when `hotKeyConfig['luminanceHandle']` is not `false`.
- **forwardRate** (Number) - Default: `0.1` - The rate at which the video seeks when swiping (0.1 to 1).
- **hotKeyConfig** (Object) - Default: `{}` - Configuration for hotkeys and gestures.
  - **processHandle** (Boolean) - Default: `true` - Whether to enable left/right swipe to control progress.
  - **volumeHandle** (Boolean) - Default: `true` - Whether to enable up/down swipe to control volume. If `false`, swipe is full-screen.
  - **luminanceHandle** (Boolean) - Default: `false` - Whether to enable up/down swipe to control brightness. If `false`, swipe is full-screen.
- **defaultMenuConfig** (Object) - Default: `{}` - Configuration for the default sidebar menu.
  - **showFillSwitch** (Boolean) - Default: `true` - Whether to show the fill-to-fullscreen switch button.
  - **showLoopSwitch** (Boolean) - Default: `true` - Whether to show the loop switch button. Ineffective in live mode.
  - **showSpeedSwitch** (Boolean) - Default: `true` - Whether to allow playback speed switching. Ineffective in live mode.
  - **showShare** (Array) - Default: `[]` - Defines which share buttons to display. Accepts an array of numbers: `[1]` (Wchat), `[2]` (Wchat Moments), `[3]` (QQ), `[4]` (Twitter), `[5]` (Facebook), `[6]` (Copy Link).
- **thumbnails** (Object) - Default: `undefined` - Thumbnail configuration. Refer to the main MuiPlayer documentation for details.
- **webpage** (Boolean) - Default: `false` - Indicates if the plugin is used in a webpage application (new feature).

### Request Example
```javascript
new MuiPlayerMobilePlugin({
    showLock: false,
    hotKeyConfig: {
        volumeHandle: false,
        luminanceHandle: true
    },
    defaultMenuConfig: {
        showShare: [1, 6] // Show WeChat and Copy Link share options
    }
});
```

### Response
#### Success Response
Plugin configured with specified options.

#### Response Example
Not applicable
```

--------------------------------

### Reload Video Source in Mui-Player

Source: https://muiplayer.js.org/zh/guide/api

This example demonstrates how to reload the player with a new video source using the `reloadUrl` method. If no argument is provided, it reloads the current video source.

```javascript
var mp = new MuiPlayer(option);

// Reload with a new URL
mp.reloadUrl('../media/new_video.mp4');

// Reload the current video source
// mp.reloadUrl();
```

--------------------------------

### MuiPlayer Mobile Plugin Event Handling

Source: https://muiplayer.js.org/zh/guide/plus-mobile-plugin

This section outlines the specific behavior events emitted by the MuiPlayer mobile plugin and how to listen for them to handle actions like volume changes, brightness adjustments, and sharing.

```APIDOC
## MuiPlayer Mobile Plugin Event Handling

### Description
The MuiPlayer mobile plugin emits specific events that allow you to react to user interactions and control the player accordingly. You can attach event listeners using the `mp.on()` method.

### Method
Not applicable (JavaScript event listeners)

### Endpoint
Not applicable

### Parameters
#### Events
- **volume-change** (EventHandle) - Triggered when the volume is adjusted. Returns `{ size }` where `size` is the new volume level.
- **luminance-change** (EventHandle) - Triggered when the brightness is adjusted. Returns `{ size }` where `size` is the new brightness level.
- **share** (EventHandle) - Triggered when a share button is clicked in the default menu. Returns `{ type }` indicating the type of share button clicked.
- **back** (EventHandle) - Triggered when the back button is pressed in non-full-screen mode.

### Request Example
```javascript
// Assuming 'mp' is your MuiPlayer instance

// Handle volume changes
mp.on('volume-change', function(e) {
    mp.video().volume = e.size;
});

// Handle brightness changes
mp.on('luminance-change', function(e) {
    // Apply brightness change to video or environment if applicable
    console.log('Brightness changed to:', e.size);
});

// Handle share button clicks
mp.on('share', function(e) {
    console.log('Share button clicked:', e.type);
    // Implement sharing logic based on e.type
});

// Handle back button press in non-full-screen mode
mp.on('back', function() {
    console.log('Back button pressed (non-fullscreen)');
    // Handle navigation or player exit
});
```

### Response
#### Success Response
Event listeners attached successfully.

#### Response Example
Not applicable
```

--------------------------------

### Interact with Mui-Player API Methods

Source: https://muiplayer.js.org/zh/guide/api

This snippet shows how to use the public API methods provided by Mui-Player to control player behavior. Examples include showing toasts, toggling controls, and managing loading states.

```javascript
// Initialize the player
var mp = new MuiPlayer(option);

// Show a toast message
mp.showToast('Loading video...');

// Toggle controls visibility
mp.toggleControls(true);

// Show loading indicator
mp.showLoading();

// Close the player
// mp.destroy();
```

--------------------------------

### Listen for Page Fullscreen Change Event

Source: https://muiplayer.js.org/zh/guide/mui-player-desktop-plugin

Listen for the 'pagefull-change' event to detect when the player's fullscreen mode changes. The event returns an object containing the `pagefull` status.

```javascript
// 网页全屏改变的触发
mp.on('pagefull-change',function(data) {
    console.log(data.pagefull);
});
```

--------------------------------

### MuiPlayer Initialization and Core Configuration

Source: https://muiplayer.js.org/zh/guide/api

Initialize the MuiPlayer instance and configure core playback settings like container, video source, and basic playback options.

```APIDOC
## POST /api/muiplayer/initialize

### Description
Initializes a new MuiPlayer instance with specified options for video playback.

### Method
POST

### Endpoint
/

#### Parameters

#### Request Body
- **container** (String/Element) - required - Specifies the DOM element or selector for the player container.
- **src** (String) - required - The URL of the video source.
- **title** (String) - optional - The title of the video.
- **autoplay** (Boolean) - optional - Whether the video should autoplay (defaults to `false`).
- **preload** (String) - optional - The video preload attribute (`none`, `metadata`, `auto`, defaults to `auto`). Ignored if `autoplay` is `true`.
- **loop** (Boolean) - optional - Whether the video should loop (defaults to `false`).
- **muted** (Boolean) - optional - Whether the video should be muted by default (defaults to `false`).
- **width** (String/Number) - optional - The initial width of the player (defaults to `auto`).
- **height** (String/Number) - optional - The initial height of the player (defaults to `225px`).
- **lang** (String) - optional - The language of the player interface (e.g., `en`, `zh-cn`, `zh-tw`, defaults to `navigator.language`).
- **volume** (Number) - optional - The initial volume of the player (0 to 1, defaults to `1`).
- **autoFit** (Boolean) - optional - Whether the player container should auto-fit the video height (defaults to `true`).
- **poster** (String) - optional - The URL for the video poster image.
- **live** (Boolean) - optional - Enables live streaming mode (defaults to `false`). In live mode, playback speed and loop controls are disabled by default.
- **initFullFixed** (Boolean) - optional - Whether to initialize the player in full-screen mode (defaults to `false`).
- **autoOrientaion** (Boolean) - optional - Whether to automatically adjust orientation in full-screen mode on mobile devices (defaults to `true`).
- **dragSpotShape** (String) - optional - The shape of the progress bar's draggable point (`circular` or `square`, defaults to `circular`).
- **objectFit** (String) - optional - How the video should be scaled within its container (`contain` or `cover`, defaults to `contain`).
- **closeControlsTimer** (Number) - optional - The time in milliseconds before controls automatically hide (defaults to `3500`).
- **videoAttribute** (Array) - optional - An array of key-value objects to add custom HTML5 `video` tag attributes. Existing attributes will be overridden.
- **subtitle** (Object) - optional - Configuration for adding video subtitles (supports WebVTT format).
- **parse** (Object) - optional - Configuration for adding video decoding plugins.
- **plugins** (Object) - optional - Configuration for adding player extension plugins.

### Request Example
```json
{
  "container": "#mui-player",
  "src": "../media/media.mp4",
  "autoplay": false,
  "width": "100%",
  "height": "auto",
  "poster": "../images/poster.jpg",
  "plugins": {
    "desktop": "mui-player-desktop-plugin.js",
    "mobile": "mui-player-mobile.plugin.js"
  },
  "videoAttribute": [
    {"attrKey": "webkit-playsinline", "attrValue": "webkit-playsinline"},
    {"attrKey": "playsinline", "attrValue": "playsinline"}
  ]
}
```

### Response
#### Success Response (200)
- **mp** (Object) - The initialized MuiPlayer instance.

#### Response Example
```json
{
  "message": "Player initialized successfully",
  "playerId": "unique-player-id"
}
```
```

--------------------------------

### Initialize Mui-Player with Basic Configuration

Source: https://muiplayer.js.org/zh/guide/api

This snippet demonstrates the basic initialization of a Mui-Player instance. It specifies the container element, the video source, and other essential configuration options like autoplay, loop, and volume.

```javascript
var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    // Additional configuration options can be added here
});
```

--------------------------------

### Mui-Player Configuration Options

Source: https://muiplayer.js.org/zh/guide/api

This section details the various configuration properties available when initializing Mui-Player. These include settings for the player's appearance, behavior, video attributes, subtitles, and plugins.

```javascript
var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    title: 'My Video',
    autoplay: false,
    loop: false,
    muted: false,
    width: 'auto',
    height: '225px',
    lang: 'en',
    volume: 1,
    autoFit: true,
    poster: '../images/poster.jpg',
    live: false,
    initFullFixed: false,
    autoOrientaion: true,
    dragSpotShape: 'circular',
    objectFit: 'contain',
    closeControlsTimer: 3500,
    videoAttribute: [
        {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
        {attrKey:'playsinline',attrValue:'playsinline'},
        {attrKey:'x5-video-player-type',attrValue:'h5-page'},
    ],
    subtitle: {},
    parse: {},
    plugins: {}
});
```

--------------------------------

### MuiPlayer Desktop Plugin Configuration Options

Source: https://muiplayer.js.org/zh/guide/plus-desktop-plugin

Details on the configuration options available for the MuiPlayerDesktopPlugin, including danmaku, prompt, and seekLine settings.

```APIDOC
## Configuration Options

### `danmakuComponent`

Creates a danmaku (bullet comment) input component.

- **`open`** (Boolean): Whether to enable the danmaku component. Default: `true`.
- **`growSize`** (Number): The proportion of the container the component occupies (0 - 1). Default: `0.65`.
- **`position`** (String): The alignment position of the component (`left`, `right`, `center`). Default: `left`.
- **`buttonText`** (String): Text displayed on the send button. Default: `-`.
- **`placeholder`** (String): Placeholder text for the danmaku input field. Default: `-`.
- **`onSend`** (Function): Callback function when text is sent. Receives `text` (String) and `cleanText` (Function).
- **`loadIntercept`** (Function): Intercepts before the component loads. Receives the component element `Element`.
- **`style`** (Object): Additional styles for the component.

### `prompt`

Configuration for progress bar indicator dots.

- **`dotColor`** (String): Color of the indicator dots. Default: `#F8F8FF`.
- **`hoverShow`** (Boolean): Whether dots are only shown on hover. Default: `false`.
- **`items`** (Array): Array of indicator dot configurations. Each item can have:
    - **`time`** (Number): Time point in seconds.
    - **`content`** (String | Element): Tooltip content on hover.
    - **`style`** (Object): Custom styles for the item.

### `seekLine`

Enables or disables the seek line on the progress bar. Default: `true`.
```

--------------------------------

### 创建设置选项弹窗

Source: https://muiplayer.js.org/zh/guide/plus-desktop-plugin

通过 `createSettingPopup` 函数创建一个可自定义的选项设置窗口。需要提供弹窗的唯一标识符 (`name`) 和一个包含配置规则的数组 (`configs`)。

```javascript
mp.createSettingPopup({
    name: 'player-settings',
    configs: [
        // Configuration rules for settings groups
        // Example: { title: 'Quality', options: ['1080p', '720p'] }
    ],
    offseDistance: 10
});
```

--------------------------------

### 安装 MuiPlayer.js (npm)

Source: https://muiplayer.js.org/zh/guide/begin

使用 npm 包管理器安装 MuiPlayer.js。这是将 MuiPlayer.js 添加到您的项目中进行后续使用的标准方法。

```bash
npm i mui-player --save
```

--------------------------------

### 创建并弹出选项设置窗口

Source: https://muiplayer.js.org/zh/guide/plus-desktop-plugin

创建一个可配置的选项设置弹窗，用于调整播放器设置，如弹幕开关、字体大小等。通过 `mp.createSettingPopup` 方法创建，需要传入事件对象和配置项。配置项支持开关、子选项和回调函数。

```javascript
var danmakuConfigs = [
    {
        functions:'弹幕',
        model:'switch',
        selected:true,
        onToggle:(data, selected, back) => { ... },
    },
    {
        functions:'字体大小',
        childConfig:[
            { functions:'12 PX' },
            { functions:'16 PX' },
            { functions:'18 PX' },
            { functions:'25 PX',selected:true },
            { functions:'36 PX' },
            { functions:'45 PX' },
            { functions:'64 PX' },
        ],
        onToggle:(data, selected, back) => { ... }
    }
];

mp.createSettingPopup(event, {
    name: 'danmakuConfigs', // 指定的名称，必填
    configs: danmakuConfigs, // 配置项目
    offseDistance: 47, // 指定 popup 偏移距离
});
```

--------------------------------

### Include MuiPlayer Mobile Plugin JavaScript

Source: https://muiplayer.js.org/zh/guide/plus-mobile-plugin

This snippet shows how to include the MuiPlayer mobile plugin script in your HTML using a script tag. Ensure this is loaded before initializing the MuiPlayer instance.

```html
<script type="text/javascript" src="js/mui-player-mobile-plugin.min.js"></script>
```

--------------------------------

### 自定义 MSE 库（dash.js）播放 MPD 文件

Source: https://muiplayer.js.org/zh/guide/preset

通过 'customKernel' 配置项传入自定义函数，该函数负责使用 dash.js 初始化和管理视频播放，适用于播放 MPD 文件。需手动处理错误报告和资源销毁。

```javascript
import dashjs from 'dashjs'

var dashDecodeAction = function(video,src) {
    let dashMedia = dashjs.MediaPlayer().create();
    dashMedia.initialize(video, address.src,false);
    dashMedia.on(dashjs.MediaPlayer.events.ERROR,function(errMes) {
        console.error(errMes);
        // 发送错误报告
        player.sendError(errMes);
    })
}

// 示例使用 dash.js 播放 mpd 文件格式
var mp = new MuiPlayer({
    container:'#mui-player',
    src:'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
    ...
    
    parse:{
		customKernel:dashDecodeAction
    },
});
```

--------------------------------

### 安装 MuiPlayer.js (yarn)

Source: https://muiplayer.js.org/zh/guide/begin

使用 yarn 包管理器安装 MuiPlayer.js。这是将 MuiPlayer.js 添加到您的项目中进行后续使用的替代方法。

```bash
yarn add mui-player
```

--------------------------------

### 引入 HLS.js 和 FLV.js 库

Source: https://muiplayer.js.org/zh/guide/preset

通过 script 标签或 npm 模块管理器引入 HLS.js 和 FLV.js 库，为 MuiPlayer 提供 HLS 和 FLV 流媒体播放能力。

```html
<script type="text/javascript" src="js/hls.min.js"></script>
<script type="text/javascript" src="js/flv.min.js"></script>
```

```javascript
npm install hls.js --save
npm install flv.js --save

import Hls from 'hls.js'
import Flv from 'flv.js'
```

--------------------------------

### 使用 FFmpeg 生成视频缩略图

Source: https://muiplayer.js.org/zh/guide/thumbnails

使用 FFmpeg 工具生成视频缩略图的命令行示例。该命令可以创建指定尺寸（scale）和排列规则（tile）的缩略图，并保存为一系列 JPG 图片。适用于视频快进或跳转预览的素材准备。

```bash
ffmpeg -i video.mp4 -vsync vfr -vf "select=isnan(prev_selected_t)+gte(t-prev_selected_t\,1),scale=160:90,tile=10x10" -qscale:v 3 "output%03d.jpg"
```

--------------------------------

### MuiPlayer 缩略图配置与使用

Source: https://muiplayer.js.org/zh/guide/thumbnails

配置 MuiPlayer 播放器以使用自定义视频缩略图。通过 `thumbnails` 对象设置缩略图的预览地址、排列规则、尺寸以及异步加载函数。支持 `preview`, `tile`, `scale`, 和 `async` 属性，以满足不同的缩略图展示需求。

```javascript
var remoteImages = ['./image/thumbnail003.jpg', './image/thumbnail004.jpg']; // 测试的远程路径
var addThumbnailRecord = []; // 添加请求记录标记，防止重复
var thumbnails = {
    preview:['./image/thumbnail001.jpg','./image/thumbnail002.jpg'], // 缩略图配置地址
    tile:[10,10], // 缩略图排列规则
    scale:[160,90], // 缩略片段图宽高比 
    async:function(call) {
        let { client, put } = call;
        // 在这里建立 receive 接收函数，获取当前正在预览缩略图时鼠标寻址到指定的时间(秒) 和 preview index，并通过回调函数返回数据；
        client.receive = (data) => {
            let { time, thumbnail_image_index: thumbnailInex } = data;
            if(!addThumbnailRecord.includes(thumbnailInex)) {
                addThumbnailRecord.push(thumbnailInex);

                // 延时模拟网络异步请求缩略图路径
                setTimeout(() => {
                    put([
                        // index：缩略图队列顺序，src：缩略图路径
                        { index: thumbnailInex, src: remoteImages[thumbnailInex]},
                    ]);
                }, 300);
            }else {
                // Thumbnail position index ${ thumbnailInex } has complete request
            }
        }
    }
}

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

    plugins:[
        new MuiPlayerMobilePlugin({
            thumbnails,
        }),
            
        new MuiPlayerWebpagePlugin({
            thumbnails,
        })
    ]
});
```

--------------------------------

### 引入 MuiPlayer.js 和 CSS (script 标签)

Source: https://muiplayer.js.org/zh/guide/begin

通过 HTML 的 script 标签引入 MuiPlayer.js 及其基础样式文件。此方法适用于直接在 HTML 文件中使用，无需模块化构建。

```html
<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<!-- 指定播放器容器 -->
<div id="mui-player"></div>

```

--------------------------------

### 引入 MUI Player PC 端扩展组件

Source: https://muiplayer.js.org/zh/guide/plus-desktop-plugin

在页面中引入 'mui-player-desktop-plugin.js' 文件，该插件需要在初始化 MuiPlayer 播放器之前加载。通常通过 `<script>` 标签引入，并确保路径正确。

```html
<!-- 使用标签引入 “专业版” 扩展组件 -->
<script type="text/javascript" src="js/mui-player-desktop-plugin.min.js"></script>
```

--------------------------------

### 配置自定义右侧栏弹出窗口 (JavaScript)

Source: https://muiplayer.js.org/zh/guide/custom-control

通过 JavaScript 初始化 MuiPlayer 时，使用 `custom.rightSidebar` 数组来配置右侧弹出侧边栏。可以指定 `slot` 和 `width`。配套的 `on_hd` 函数处理清晰度切换逻辑。

```javascript
// custom rightSidebar option configuration
var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    custom:{
        rightSidebar:[
            {
			slot:'HD', // 对应定义的 slot 值
			width:'200px' // 侧栏宽度，string | number
            }
        ],
    }
});

function on_hd() {
    mp.toggleControls();
    
    //清晰度切换
    mp.reloadUrl(url);
    
    mp.showToast('清晰度切换成功！');
};
```

--------------------------------

### MuiPlayer Customization Configuration

Source: https://muiplayer.js.org/zh/guide/api

Customize the player's appearance and behavior, including theme color and control visibility.

```APIDOC
## POST /api/muiplayer/customize

### Description
Applies custom settings to the MuiPlayer instance for appearance and control visibility.

### Method
POST

### Endpoint
/

#### Parameters

#### Request Body
- **themeColor** (String) - optional - Sets the primary theme color for the player controls (defaults to `#1e98d4`).
- **showMiniProgress** (Boolean) - optional - Whether to display the mini progress bar at the bottom (defaults to `true`). This is invalid if `live` is `true`.
- **pageHead** (Boolean) - optional - Whether to display the header controls when not in full-screen mode (defaults to `true`).
- **custom** (Object) - optional - Object for defining custom player controls.
  - **custom.headControls** (Array) - optional - An array to configure custom buttons for the player's header (max 5 items).
  - **custom.footerControls** (Array) - optional - An array to configure custom controls for the player's footer (max 5 items).
  - **custom.rightSidebar** (Array) - optional - An array to configure custom elements for the player's right sidebar (max 5 items).

### Request Example
```json
{
  "themeColor": "#55c612",
  "showMiniProgress": false,
  "pageHead": false,
  "custom": {
    "headControls": [
      {"icon": "share", "handler": "shareHandler"}
    ],
    "footerControls": [
      {"icon": "like", "handler": "likeHandler"}
    ]
  }
}
```

### Response
#### Success Response (200)
- **message** (String) - Confirmation message indicating customization was applied.

#### Response Example
```json
{
  "message": "Player customization applied successfully."
}
```
```

--------------------------------

### uni-app WebView 加载 MuiPlayer

Source: https://muiplayer.js.org/zh/guide/uni-app

此代码片段展示了如何在 uni-app 项目的 WebView 组件中加载 MuiPlayer。你需要将 MuiPlayer 的 JS 和 CSS 文件放入 `hybrid` 文件夹，并在 WebView 的 `src` 中链接到 HTML 文件。这使得 MuiPlayer 可以在 H5+ 环境下运行。

```html
<template>
  <view>
    <web-view :src="'./hybrid/player.html'"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // WebView 的 src 指向本地 HTML 文件
    };
  }
};
</script>

<style>
/* 样式 */
</style>
```

--------------------------------

### 初始化 MuiPlayer 视频播放器

Source: https://muiplayer.js.org/zh/guide/begin

使用 JavaScript 初始化 MuiPlayer 播放器。通过传递一个包含容器选择器、标题和视频源路径的配置对象来创建一个基本的视频播放器实例。

```javascript
// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'标题',
    src:'./static/media/media.mp4',
})

```

--------------------------------

### 初始化 MuiPlayer 并配置 PC 端扩展插件

Source: https://muiplayer.js.org/zh/guide/plus-desktop-plugin

在 MuiPlayer 的初始化配置中，将 `MuiPlayerDesktopPlugin` 实例添加到 `plugins` 数组中。需要传入您的插件密钥（key）以及其他自定义配置项。

```javascript
var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    // ...
    
    plugins:[
        new MuiPlayerDesktopPlugin({
            key: '配置您插件密文',
            // ...
        })
    ]
});
```

--------------------------------

### Customize Mui-Player Theme and Controls

Source: https://muiplayer.js.org/zh/guide/api

This snippet illustrates how to customize the player's appearance, such as the theme color and the visibility of mini progress bars and page head controls. It also shows placeholders for custom control configurations.

```javascript
var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    themeColor:'#55c612', // Custom theme color
    showMiniProgress: true,
    pageHead: true,
    custom: {
        headControls: [],
        footerControls: [],
        rightSidebar: []
    }
});
```

--------------------------------

### 初始化和控制 CommentCoreLibrary 弹幕实例

Source: https://muiplayer.js.org/zh/guide/barrage

使用 JavaScript 初始化 CommentCoreLibrary 实例，加载弹幕数据，并控制弹幕的播放、停止及时间轴更新。弹幕数据格式包括模式、文本、时间、大小、持续时间和颜色等。

```javascript
var CM = new CommentManager(document.getElementById('comment-stage'));
CM.init(); // 初始化弹幕管理器


var danmakuData = [
    {"mode":1,"text":"请画出受力分析（10分）","stime":200,"size":25,"dur":7000,"color":0xffffff},
	{"mode":5,"text":"这风景太漂亮了吧~","stime":1000,"size":25,"dur":4000,"color":0xFF0000},
	{"mode":5,"text":"前方高能，建议反复观看！！","stime":1500,"size":25,"dur":4000,"color":0xFFFF00},
]
CM.load(danmakuData); // 载入弹幕列表，

// 启动播放弹幕（在未启动状态下弹幕不会移动）
CM.start();

// 停止播放（停止弹幕移动）
CM.stop();

// 更新时间轴时间
CM.time(500);
CM.time(1000);

```

--------------------------------

### 引入 CommentCoreLibrary (CCL) 样式和脚本

Source: https://muiplayer.js.org/zh/guide/barrage

在 HTML 文件头部引入 CCL 的 CSS 和 JavaScript 文件。这是使用 CCL 功能的前提，确保库文件路径正确。

```html
<!-- 引入 ccl 样式文件 -->
<link rel="stylesheet" type="text/css" href="css/CommentCoreLibrary.min.css"/>
<!-- 引入 ccl 脚本文件 -->
<script type="text/javascript" src="js/CommentCoreLibrary.min.js"></script>

```

--------------------------------

### MuiPlayer Plus API - 浏览器环境

Source: https://muiplayer.js.org/zh/guide/uni-app

此代码片段展示了如何使用 MuiPlayer 在 uni-app 中调用 H5+ 的 `plus.navigator` API。`plus.navigator.setFullscreen()` 用于设置应用是否全屏显示（隐藏状态栏），`plus.navigator.hasNotchInScreen()` 用于判断设备是否为刘海屏。

```javascript
// 设置应用是否全屏显示
const isFullscreen = true;
plus.navigator.setFullscreen(isFullscreen);

// 判断是否为刘海屏
const hasNotch = plus.navigator.hasNotchInScreen();
console.log('Has notch screen:', hasNotch);
```

--------------------------------

### MuiPlayer Plus API - 设备管理

Source: https://muiplayer.js.org/zh/guide/uni-app

此代码片段展示了如何使用 MuiPlayer 在 uni-app 的 H5+ 环境下调用 `plus.device.setVolume()` 方法来控制设备的音量。这是 MuiPlayer 默认处理的 API，用于实现移动设备的播放控制。

```javascript
// 设置设备音量 (0.0 - 1.0)
const volume = 0.8;
plus.device.setVolume(volume);
```

--------------------------------

### uni-app Renderjs 加载 MuiPlayer

Source: https://muiplayer.js.org/zh/guide/uni-app

推荐在 uni-app 的 Renderjs 中加载 MuiPlayer，这样可以在 Vue 组件内直接使用播放器，无需额外创建 HTML 文件。Renderjs 技术允许在视图层加载 JavaScript，从而更方便地集成 MuiPlayer。

```javascript
// 在 .vue 文件中使用 Renderjs 加载 MuiPlayer
<template>
  <view>
    <div id="player-container"></div>
  </view>
</template>

<script>
export default {
  mounted() {
    this.initMuiPlayer();
  },
  methods: {
    initMuiPlayer() {
      // 在 Renderjs 中初始化 MuiPlayer
      // 实际的 MuiPlayer 初始化代码会放在这里
      console.log('MuiPlayer initialized in Renderjs');
    }
  }
};
</script>

<script module="renderer" lang="renderjs">
export default {
  mounted() {
    // 在视图层执行 MuiPlayer 的初始化
    const MuiPlayer = require('@/hybrid/mui-player.min.js'); // 假设文件路径
    const player = new MuiPlayer({
      container: document.getElementById('player-container'),
      src: 'your_video_source.mp4'
    });
  }
}
</script>
```
Tokens:
Raw