Firefox浏览器中HTML5 video底部控制栏显示异常问题求助

这是Firefox浏览器针对高宽比远大于1的竖屏视频的默认控制栏渲染已知问题，不属于你的HTML代码错误，也不是你浏览器独有的故障，不少使用竖版视频的开发者都遇到过同类现象。

你可以通过以下几种方案解决：

• 限制视频最大高度，避免整体高度超过视口可视范围
  给video标签的样式增加max-height限制，配合自适应宽度即可，修改后的代码参考：

<video style="display: block; margin: 0 auto; max-height: 90vh; width: auto;" src="Witches.mp4" controls>
  Video is not supported on your browser.
</video>

90vh表示视频最高仅占当前视口高度的90%，剩余空间足够容纳Firefox的控制栏，同时视频会保持原比例缩放不会变形。

• 嵌套外层容器做尺寸约束，适配不同设备屏幕
  如果需要兼容移动端、桌面端不同尺寸的屏幕，可以在外层套一个容器限制最大宽度，视频高度自适应：

<div style="max-width: 100%; width: 1080px; margin: 0 auto;">
  <video style="width: 100%; height: auto; object-fit: contain;" src="Witches.mp4" controls>
    Video is not supported on your browser.
  </video>
</div>

• 自定义播放控制栏
  如果需要全浏览器统一的播放体验，完全规避不同浏览器默认控件的兼容问题，可以自行实现播放、进度条、音量等控制功能，通过JS调用video原生API实现对应操作即可。

修改完成后可以在Firefox隐私模式下打开页面测试，排除浏览器扩展、缓存的干扰。

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