# API
TIP
mui-player.js creates the basic controls used by the player, including the progress bar defined on the player, the start/pause/full-screen switch button, and the lower part of the player head control. It handles video playback and compatibility issues.
In order to make the code has good separation module, we targeted the mobile terminal and PC terminal to develop a suitable plug out of the box, when you read this you can choose to use these two types of extensions of the
mui-player.js is the core library for creating players, check the configurable api and its external interface:
# Main configuration
From here, initialize the player instance:
var mp = new MuiPlayer({
container:'#mui-player',
src:'../media/media.mp4',
...
});
Attribute name | Types of | Defaults | Description |
---|---|---|---|
container | String/Element | required | Specify the player container |
src | String | required | Resource address for video playback |
title | String | title | |
autoplay | Boolean | false | Whether to play automatically, please reference for the setting of autoplay attribute |
preload | String | auto | Whether the video is preloaded, the optional value is none | metadata | auto. If autoplay=true, this attribute is ignored. |
loop | Boolean | false | Whether to loop |
muted | Boolean | false | Whether to play muted |
width | String/Number | auto | Initialize the player width |
height | String/Number | 225px | Initialize the player height |
lang | String | navigator.language | Player interface language, optional en | zh-cn | zh-tw |
volume | Number | 1 | Initially set the video volume, the value is 0-1 |
autoFit | Boolean | true | Whether the player container height is adaptive to the video height |
poster | String | Resource address of video cover | |
live | Boolean | false | Whether to enable the live broadcast mode, the default menu configuration of the live broadcast mode does not allow controlling the playback speed and loop playback |
initFullFixed | Boolean | false | Initialize whether the web page is played in full screen |
autoOrientaion | Boolean | true | Whether to switch the direction automatically when full screen, in html5+ (opens new window)The screen will automatically rotate when the screen is in full screen, and some mobile browsers automatically rotate the direction when the screen is full. Tag: There is a slight difference when switching to full screen in ios. In full screen mode, the system is called to play in full screen. |
dragSpotShape | String | circular | Set the shape of the drag point of the progress bar, optional circula | square |
objectFit | String | contain | The size of the video and the representation of the video container.Optional contain | cover |
closeControlsTimer | Number | 3500 | Set the time for the player to hide the controls regularly, which can be used with the toggleControls function interface; new |
# | |||
videoAttribute | Array | [] | This attribute is to add more H5 Video tags. The parameter is to accept each key value object. Note that if the attribute value in the array exists in the existing setting, it will be overwritten. If you need to configure the declaration to enable the same layer playback, the configuration is as follows: videoAttribute:[ {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'}, {attrKey:'playsinline',attrValue:'playsinline'}, {attrKey :'x5-video-player-type',attrValue:'h5-page'}, ] |
# | |||
subtitle | Object | {} | Add video subtitles. Currently only supports webvtt subtitle format, please refer to video subtitles |
parse | Object | {} | Add video decoding plug-in. Please refer to: Decoding Play |
plugins | Object | {} | Add playback extension plug-in, please refer to: mobile extension PC extension |
# Custom configuration
Customize the player controls and styles:
var mp = new MuiPlayer({
container:'#mui-player',
src:'../media/media.mp4',
themeColor:'#55c612', // Custom theme color
...
});
Attribute name | Types of | Defaults | Description |
---|---|---|---|
themeColor | String | #1e98d4 | Theme color |
showMiniProgress | Boolean | true | Whether to display the mini progress bar at the bottom, which is displayed when the view manipulation control is hidden. It is invalid when the configuration item live=true. |
pageHead | Boolean | true | In non-full-screen mode, whether to display the head operation controls of the player |
# custom | Object | Customize player controls.Please refer to: custom player controls | |
custom.headControls | Array | Customize the player head button group, the parameter accepts a configuration array, the maximum configurable object is 5,reference | |
custom.footerControls | Array | Customize the control group at the bottom of the player, the parameter accepts a configuration array, the maximum configurable object is 5, reference | |
custom.rightSidebar | Customize the pop-up bar on the right side of the player, the parameter accepts a configuration array, the maximum configurable object is 5,reference |
# Play event monitoring
MuiPlayer manages part of the playback events, and can handle the appropriate required actions by adding a listener to the specified event. Example:
var mp = new MuiPlayer(option);
// The monitor player has been created
mp.on('ready',function(event) {
console.log(event);
});
Event name | Types of | Function returns | Description |
---|---|---|---|
back | EventHandle | Triggered when the back button is clicked. Tag: Trigger only in non-full screen mode | |
duration-change | EventHandle | {duration} | Triggered when the video duration has been changed, only occurs when the duration is greater than 1, the unit is second (s) |
seek-progress | EventHandle | {percentage} | Triggered when the user is addressing the video |
fullscreen-change | EventHandle | {direction,fullscreen} | Triggered when the video enters or exits the full screen. When the player is initialized, this event will be triggered once by default direction: indicates the direction of the current playback, applicable on the mobile phone fullscreen: Indicates whether the current playback is in full screen in the pc environment, this attribute is only returned in the pc environment |
controls-toggle | EventHandle | {show} | controls Triggered when the state of the control changes |
error | EventHandle | native event | An error occurred during playback |
destroy | EventHandle | Video destruction event | |
ready | EventHandle | The player has been created |
# Player interface
MuiPlayer provides some external interfaces, which implement the built-in functions of the player. Examples:
// Initialize the player configuration
var mp = new MuiPlayer(option);
// Show a message prompt
mp.showToast('prompt...');
Method name | Transfer parameters | Required | Description |
---|---|---|---|
toggleControls | true | false | - | Manipulate the display state of the player control, and the parameter passes a Boolean parameter to control hiding or displaying; By default, the playback controls will be hidden according to the closeControlsTimer, and the advanced function closeTimer | openTimer can be used to close or open the timer, for example:mp.toggleControls(true).closeTimer(); mp.toggleControls(false).openTimer(); new |
showToast | String | Object | - | Pop-up message prompt, refer to receiving a character or string or object Ojbect = { message='', duration=1500, style={} } duration is equal to 1500 by default, in milliseconds |
video | - | - | Returns the native video element of the current instance |
reloadUrl | Video Src | - | Specify a video address to reload the resource, if no parameter is passed, it will reload by default |
showRightSidebar | Slot name | pop up Customize the right sidebar window, reference | |
showLoading | - | - | Display video buffer loading |
hideLoading | - | - | Hidden video buffer loading |
openFullScreen | - | Turn on full screen playback | |
closeFullScreen | - | Turn off full screen playback | |
getControls | - | Get all the player controls and return an array | |
destroy | - | - | Destroy the video player |
sendError | event | Proactively send error reports |