HTML5 视频标签：无法使用相对高度并正确放置控件

Posted 2023-05-08

技术标签:

【中文标题】HTML5 视频标签：无法使用相对高度并正确放置控件【英文标题】：HTML5 video tag : Can't use relative height and properly place Controls 【发布时间】：2018-06-03 02:36:02 【问题描述】：

使用reactjs，我在组件中插入了一个视频，但是当我在为容器设置的max-height 中使用相对单位时，它似乎不喜欢。

而且我想使用vh 来设置max-height，但是当我这样做时，视频高于页面的其他内容（例如一个狂野的z-index) 并且不像设置容器尺寸的子块那样工作......

是否有可能抵消/避免这种影响？

简化渲染方法：

render() 
  return (
    <div className='ThatComponentContainer'>
      <div>
        <p>Some content</p>
      </div>
      <div className='VideoPlayer'  width='520' height='294'>
        <video controls preload="auto" width='520' height='294'>
          <source src=VideoWEBM type="video/webm" />
          <p>I'm sorry; your browser doesn't support html5 video in WebM with VP8/VP9 or MP4 with H.264.</p>
        </video>
      </div>
      <div>
        Some other cotent
      </div>
    </div>
  );

CSS：

.ThatComponentContainer 
  display: flex;
 

.VideoPlayer video 
  min-height: 100%;
  height: auto; 


.VideoPlayer 
  /* 
  max-height: 20vh;  <<<----- I'd like to use this */
  max-height: 588px;
  min-height: 294px;
  height: auto;

  max-width: 90%;
  width: auto;

这是视频，我还有另一个问题，但我似乎找不到任何相关内容... 视频的控件位于视频底部，因此您看不到视频的一部分。我想要视频下方的控件，可以吗？。

【问题讨论】：

您的 css 部分丢失，fiddle @NoopurDabhi ：我不明白，我的 CSS 既在问题中，也在呈现的网站中......你是什么意思？检查我在上面评论中添加的小提琴，视频工作正常。视频控件是shadow-dom 的一部分，目前不支持将其移出视频组件。对于您的情况，您可以为视频播放器使用自定义皮肤。查看此developer.mozilla.org/en-US/Apps/Fundamentals/… 了解更多信息 【参考方案1】：

正如 Tushar Vaghela 在 cmets 中所说，这是 shadow-dom 的一部分（本质上是内置的浏览器 CSS）。

目前最好的解决方案是隐藏控件并使用简单的自定义控件。这是您需要的一切，由 MDN 提供。

The code Live example Written guide

【讨论】：

【参考方案2】：

如果有帮助，请尝试在您的视频标签中添加此 CSS