Docs | Chinese documents

introduce

MuiPlayer is an HTML5 video player plug-in, which is configured with exquisite and operable playback controls by default, involving common playback scenarios, such as full-screen playback, fast-forward playback, loop playback, volume adjustment, video decoding and other functions.

Support MP4, M3U8, FLV and other media formats to play, solve most compatibility problems, and adapt to PC, mobile phone end play.

MuiPlayer has rich parameters to customize player instances. You can easily configure MuiPlayer to play videos in customized scenarios.

The characteristics of

MuiPlayer helps us solve a number of common problems in everyday H5 Video application development:

  1. The UI of each browser cannot be uniform
  2. UI extensions and state handling are prone to conflicts
  3. The timing of events triggered by the H5 Video API varies in different environments (Android, ios, and PC)
  4. Media formats have various compatibility issues, and MuiPlayer handles most of the compatibility issues that play in different environments
  5. We have provided a set of sound solutions to avoid some detours in the development of H5 video

The installation

Install using NPM:

npm i mui-player --save
Copy the code

Install using YARN:

yarn add mui-player
Copy the code

use

1, use the script tag to introduce:

<! -- import basic style files mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<! -- import basic script mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<! -- Specify the player container -->
<div id="mui-player"></div>
Copy the code

Or use the module manager to introduce:

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
Copy the code

2. Define the player container:

<div id="mui-player"></div>
Copy the code

3. Initialize the build player:

// Initialize the MuiPlayer plug-in. The MuiPlayer method passes an object containing the configuration of all plug-ins
var mp = new MuiPlayer({
    container:'#mui-player'.title:'Title'.src:'./static/media/media.mp4',})Copy the code

This should build a video player with default configuration controls for initialization. Below you can read about some of the BASIC configuration options for the MuiPlayer API. Go to parameter API

Plugins

  • mui-player-mobile-plugin.js
  • mui-player-desktop-plugin.js