VePlayer 支持通过三种方式自定义播放器 UI。其中，方式一和方式二仅支持更改播放器局部颜色或图标，方式三则是自定义程度最高也最为通用的方式。您可以结合这三种方式来满足您 UI 设计的需求。

方法一：设置关键点颜色

您可通过配置项 commonStyle 设置一些关键点的颜色，如进度条颜色。以下是支持的设置示例和说明：

commonStyle: {
  // 进度条底色
  progressColor: '#f4f4f4',
  // 播放完成部分进度条底色
  playedColor: '#e3db68',
  // 缓存部分进度条底色
  cachedColor: '#ffb027',
  // 进度条滑块样式，支持字符串或 Style 样式对象
  sliderBtnStyle: {
    backgroundColor: '#6b47e2'
  },
  // sliderBtnStyle: 'rgb(46 70 146)';
  // 音量颜色
  volumeColor: '#5bed67'
},

效果演示：

方法二：设置图标元素

您可以在设置中传入 SVG 图标来更改各个功能按钮的图标。

• 通过配置项 icons 传入图标。每一项都需要是返回 HTMLElement 类型的函数。以更改外挂字幕开启按钮的图标为例：

  icons: {
    // 图标配置 Key
    vttSubOpen: () => {
        const img = document.createElement('img');
        img.src = 'https://p6-addone.byteimg.com/tos-cn-i-hhc0kcolqq/92573eef59104db4acdc990fcc7a14cf.png~tplv-hhc0kcolqq-image.image';
        img.width = 20;
        img.height = 20;
        return img;
    }
  },
  

• 您也可以对各个包含图标的插件的配置项 icons 进行单独设置，支持传入类型为 string | url |（） => HTMLElement。以更改 Control 栏播放按钮的图标为例：

  // 插件名称
  play: {
    icons: {
      play: '<img src="https://p6-addone.byteimg.com/tos-cn-i-hhc0kcolqq/7e93776a1f854453ba809add03f3647e.svg~tplv-hhc0kcolqq-image.image">',
    }
  },
  

效果演示：

下表列出了图标配置 Key 和对应的插件名称。

方法三：覆盖 CSS 改写样式

您可以自行添加 CSS 进行样式覆盖。以下示例展示了如何将播放器中间的播放按钮位置移至左下角、更改进度条拖拽按钮、更改底部控制栏的背景样式。

.xgplayer .xgplayer-controls {
    background-color: #7fd3f0;
    background-image: none;
}
.xgplayer .xgplayer-start {
    left: 50px;
    bottom: 50px;
    top: unset;
}
.xgplayer-pc .xgplayer-progress .xgplayer-progress-btn {
    width: 24px;
    height: 24px;
    box-shadow: none;
    background:none;
}
.xgplayer .xgplayer-progress-btn:before {
    background-image: url("https://p6-addone.byteimg.com/tos-cn-i-hhc0kcolqq/0689ad58f2a94789bca639eac7fecc02.png~tplv-hhc0kcolqq-image.image");
    background-size: 100% 100%;
    background-color: transparent;
    width: 20px;
    height: 20px;
}

效果演示：