# Custom player controls
TIP
MuiPlayer itself has designed a considerable set of components. At the same time, the player also provides the ability to extend controls. By configuring custom to customize the elements of the display interface, customize the extension of the video container header and bottom button group.
# Configuration options
Attribute name | Transfer parameters | Example | Description |
---|---|---|---|
custom | Custom control configuration | ||
custom.headControls | [...] | reference | Customize the player head button group, the parameter accepts an array, the maximum configurable object is 5 |
custom.footerControls | [...] | reference | Customize the button group at the bottom of the player, the parameter accepts an array, and the maximum configurable object is 5 |
custom.rightSidebar | [...] | reference | The custom pop-up window on the right side bar, the parameter accepts an array, and the maximum configurable object is 5 |
# Description
- Looking at the example below , you must declare a slot attribute value for the parent of the custom control element. All child nodes of the defined slot attribute are used as all the content of the display control. If the template tag is used, the defined content will not be displayed directly Page, you can also use a div as a container for packaging controls.
# Example 1: Customize the player header button
<div id="mui-player">
<template slot="castScreen">
<svg t="1573891279687" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3272" width="20" height="20"><path d="M853.015273 814.545455h-161.419637a34.909091 34.909091 0 0 1 0-69.818182h161.419637A54.690909 54.690909 0 0 0 907.636364 690.106182V264.075636A54.690909 54.690909 0 0 0 853.015273 209.454545H170.961455A54.667636 54.667636 0 0 0 116.363636 264.075636v426.030546A54.667636 54.667636 0 0 0 170.961455 744.727273h141.358545a34.909091 34.909091 0 0 1 0 69.818182H170.961455A124.555636 124.555636 0 0 1 46.545455 690.106182V264.075636A124.555636 124.555636 0 0 1 170.961455 139.636364h682.053818A124.578909 124.578909 0 0 1 977.454545 264.075636v426.030546A124.578909 124.578909 0 0 1 853.015273 814.545455zM674.909091 907.636364H349.090909l162.909091-209.454546 162.909091 209.454546z" fill="#ffffff" p-id="3273"></path></svg>
</template>
</div>
// custom headerButton option configuration
var mp = new MuiPlayer({
container:'#mui-player',
src:'../media/media.mp4',
...
custom:{
headControls:[
{
slot:'castScreen', // Corresponding to the defined slot value
click:function(e) { // Button click event callback
console.log('cast screen button click...');
},
style:{}, // Custom add control style
}
]
}
});
# Example 2: Customize the buttons at the bottom of the player
<div id="mui-player">
<template slot="nextMedia">
<svg t="1584686776454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1682" width="22" height="22"><path d="M783.14692466 563.21664097L240.85307534 879.55472126c-39.1656664 24.10194914-90.38230866-6.02548665-90.38230865-51.21664226v-632.676158c0-45.19115433 51.21664097-75.31859011 90.38230865-51.21664226l542.29384932 316.33808029c39.1656664 21.08920518 39.1656664 81.34407804 0 102.43328194z" p-id="1683" fill="#ffffff"></path><path d="M873.52923331 734.94302767c0 42.17841036-39.1656664 78.33133408-90.38230865 78.33133407s-90.38230866-36.15292371-90.38230735-78.33133407V289.05697233c0-42.17841036 39.1656664-78.33133408 90.38230735-78.33133407s90.38230866 36.15292371 90.38230865 78.33133407v445.88605534z" p-id="1684" fill="#ffffff"></path></svg>
</template>
</div>
// custom footerControls option configuration
var mp = new MuiPlayer({
container:'#mui-player',
src:'../media/media.mp4',
...
custom:{
footerControls:[
{
slot:'nextMedia', // Corresponding to the defined slot value
position:'left', // Display position, optional left, right
tooltip:'next media', // The text prompt displayed when the mouse is hovering over the control
oftenShow:false, // Whether to display frequently. The default is false, hidden in the vertical screen state in the mobile environment, hidden when the video container is less than 500px under the judgment of the pc environment
click:function(e) { // Button click event callback
console.log('next media button click...');
},
style:{}, // Custom add control style
},
],
}
});
# Example 3: Customize the pop-up window on the right sidebar
<template slot="HD">
<div style="color: white;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;font-size: 16px;">
<p onclick="on_hd(1)">Blu-ray 1080P</p>
<p onclick="on_hd(2)">Ultra-clear</p>
<p onclick="on_hd(3)">HD</p>
<p onclick="on_hd(4)">SD</p>
</div>
</template>
// custom rightSidebar option configuration
var mp = new MuiPlayer({
container:'#mui-player',
src:'../media/media.mp4',
...
custom:{
rightSidebar:[
{
slot:'HD', // Corresponding to the defined slot value
width:'200px' // Sidebar width,string | number
}
],
}
});
function on_hd() {
mp.toggleControls();
//Definition switching
mp.reloadUrl(url);
mp.showToast('Definition switching succeeded!');
};