如何自定义HTML5 Video媒体控制面板的高度、宽度与圆角

针对WebKit内核浏览器（Chrome、Safari），直接修改::-webkit-media-controls-panel的圆角、高度无效，核心原因是控件被父容器::-webkit-media-controls-enclosure的默认样式限制，需要同时调整包裹层和面板的样式：

/* WebKit内核浏览器适配 */
video::-webkit-media-controls-enclosure {
  overflow: hidden; /* 确保圆角不会被内部元素撑开 */
  border-radius: 12px; /* 自定义圆角大小 */
  width: 95%; /* 相对于video容器的宽度，可自行调整 */
  margin: 0 auto; /* 让控件面板居中显示 */
}

video::-webkit-media-controls-panel {
  background-color: #bbb;
  border-radius: 12px; /* 同步圆角，避免面板内容溢出 */
  height: 60px; /* 自定义面板高度 */
  padding: 0 10px; /* 调整内边距，适配高度避免控件挤在一起 */
}

针对Firefox浏览器，原生控件的自定义规则不同，可尝试以下代码：

/* Firefox浏览器适配 */
video::-moz-media-controls {
  background-color: #bbb;
  border-radius: 12px;
  height: 60px;
}

video::-moz-media-controls-panel {
  border-radius: 12px;
}

完整示例代码如下：

<video width="350" height="240">
  <source src="file-path" type="video/mp4">
</video>

<style>
/* WebKit内核适配 */
video::-webkit-media-controls-enclosure {
  overflow: hidden;
  border-radius: 12px;
  width: 95%;
  margin: 0 auto;
}

video::-webkit-media-controls-panel {
  background-color: #bbb;
  border-radius: 12px;
  height: 60px;
  padding: 0 10px;
}

/* Firefox适配 */
video::-moz-media-controls {
  background-color: #bbb;
  border-radius: 12px;
  height: 60px;
}

video::-moz-media-controls-panel {
  border-radius: 12px;
}
</style>

注意：部分新版本浏览器可能对原生媒体控件的自定义做了限制，如果上述CSS方案仍不生效，建议考虑自定义媒体控件（通过JavaScript监听video事件，自行实现播放、暂停、进度条等功能），这种方式能完全掌控控件的样式和行为。

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