ArtPlayer/packages/artplayer-vitepress/docs/plugin/control-ui.md

控制器皮肤

演示

👉 查看完整演示

安装

::: code-group

npm install artplayer-plugin-control

yarn add artplayer-plugin-control

pnpm add artplayer-plugin-control

<script src="path/to/artplayer-plugin-control.js"></script>

:::

CDN

::: code-group

https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js

https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js

:::

使用

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreen: true,
    fullscreenWeb: true,
    plugins: [
        artplayerPluginControl(),
    ],
});

enable

• Type: Getter/Setter
• Parameter: Boolean

是否启用新的控制器皮肤

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    fullscreen: true,
    fullscreenWeb: true,
    controls: [
        {
            position: 'right',
            html: '<button type="button">Switch UI</button>',
            click: function () {
                const { enable } = art.plugins.artplayerPluginControl;
                art.plugins.artplayerPluginControl.enable = !enable;
            },
        },
    ],
    plugins: [
        artplayerPluginControl(),
    ],
});