如何移除react-html5video播放器渲染时出现的黑色边框

解决方案 #

你当前将className挂载在<source>标签上，样式不会生效，<source>仅用于声明视频源信息，所有播放器相关样式需要绑定到<Video>组件本身，按以下步骤调整即可：

1. 修正组件代码

<Video
  ref={videoRef}
  playsInline
  autoPlay={true}
  muted={false}
  loop={false}
  className="video" // 把className移到此处
>
  <source
    defer
    src={i.url}
    type="video/MP4"
  />

2. 调整CSS样式

/* 原样式里的flex、横向滚动相关属性属于容器布局样式，建议移到包裹Video组件的外层父元素上，不要加在video本身 */
.video {
  /* 移除浏览器/组件默认的边框、外轮廓 */
  border: none !important;
  outline: none !important;
  /* 覆盖播放器默认的黑色背景 */
  background-color: transparent !important;
  /* 适配容器比例，可根据需求调整取值 */
  object-fit: cover; 
}

/* 可选：强制覆盖react-html5video组件内置的根节点黑色背景 */
.react-html5-video {
  background: transparent !important;
}

3. 比例适配说明
   如果是视频本身分辨率和容器宽高比不一致导致的黑边，调整object-fit属性即可：

• object-fit: cover：视频等比例铺满容器，超出部分裁剪，无黑边
• object-fit: fill：视频直接拉伸铺满容器，无黑边但可能出现画面变形
• object-fit: contain：视频完整等比例显示，比例不一致时会保留黑边

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