VideoJS控制栏按钮外观修改：替换按钮图标/字符方法咨询

替换按钮字符 #

VideoJS默认按钮的图标通过CSS伪元素::before的content属性定义，直接覆盖对应按钮的样式即可替换字符：

• 先定位目标按钮的类名（比如播放按钮类为.vjs-play-control）
• 编写CSS覆盖伪元素内容：

/* 替换播放状态按钮字符 */
.video-js .vjs-play-control::before {
  content: "▶"; /* 替换为你需要的字符 */
}

/* 替换暂停状态按钮字符 */
.video-js .vjs-paused .vjs-play-control::before {
  content: "⏸";
}

如果是自定义新增按钮，注册组件时可直接设置字符：

// 基于基础按钮组件扩展
const BaseButton = videojs.getComponent('Button');
class CustomTextButton extends BaseButton {
  constructor(player, options) {
    super(player, options);
    // 直接设置按钮显示的字符
    this.el().innerHTML = "我的按钮";
  }
}

// 注册组件并添加到控制栏
videojs.registerComponent('CustomTextButton', CustomTextButton);
player.getChild('controlBar').addChild('CustomTextButton', {});

替换按钮为图片 #

通过CSS清空原有字符，设置背景图实现图片替换：

/* 替换播放按钮为图片 */
.video-js .vjs-play-control::before {
  content: ""; /* 清空默认字符 */
  background-image: url('播放按钮图片路径');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 20px; /* 匹配图片尺寸 */
  height: 20px;
}

/* 替换暂停状态按钮图片 */
.video-js .vjs-paused .vjs-play-control::before {
  background-image: url('暂停按钮图片路径');
}

自定义按钮也可直接在组件内设置背景图：

class CustomImageButton extends BaseButton {
  constructor(player, options) {
    super(player, options);
    const btnEl = this.el();
    // 设置背景图样式
    btnEl.style.backgroundImage = "url('自定义按钮图片路径')";
    btnEl.style.backgroundSize = "contain";
    btnEl.style.backgroundRepeat = "no-repeat";
    btnEl.style.width = "30px";
    btnEl.style.height = "30px";
    // 清空默认字符
    btnEl.innerHTML = "";
  }
}

videojs.registerComponent('CustomImageButton', CustomImageButton);
player.getChild('controlBar').addChild('CustomImageButton', {});

若需要针对按钮的hover、active等状态设置不同图片，只需添加对应CSS规则即可，例如：

.video-js .vjs-play-control:hover::before {
  background-image: url('播放按钮hover状态图片');
}

内容的提问来源于stack exchange，提问作者Evgeny Balter