如何使用CSS在Mozilla Firefox浏览器中禁用或移除视频控件

你已经有了WebKit内核浏览器（比如Chrome、Edge）的禁用代码，下面是针对Mozilla Firefox的对应实现方案：

Firefox的原生视频控件基于::-moz-media-controls系列伪元素，你可以通过以下CSS精准隐藏指定控件：

/* 隐藏播放/暂停按钮 */
video::-moz-media-controls-play-button,
video::-moz-media-controls-pause-button {
  display: none;
}

/* 隐藏时间轴（进度条） */
video::-moz-media-controls-timeline {
  display: none;
}

/* 隐藏当前时间、剩余时间的显示文本 */
video::-moz-media-controls-current-time-display,
video::-moz-media-controls-time-remaining-display {
  display: none;
}

/* 隐藏音量滑块和静音按钮 */
video::-moz-media-controls-volume-slider,
video::-moz-media-controls-mute-button {
  display: none;
}

/* 可选：隐藏全屏按钮，取消注释即可生效 */
/* video::-moz-media-controls-fullscreen-button {
  display: none;
} */

如果需要一次性隐藏所有默认控件，无需逐个指定，直接隐藏整个控件栏即可：

video::-moz-media-controls {
  display: none;
}

补充说明 #

不同浏览器内核的视频控件伪类前缀不同：

• WebKit内核（Chrome、Edge、Safari）用::-webkit-media-controls-*
• Firefox用::-moz-media-controls-*

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