禁用用于背景视频ReactJS的视频播放器

如何解决禁用用于背景视频ReactJS的视频播放器

我想要一个Web应用程序着陆页的背景视频。我正在使用ReactJs。

一切正常，但在某些导航器上会显示视频控件。如何删除它？

这是我的代码：

html：

<video className="Video" autoplay="autoplay" muted="muted" loop="loop">
     <source src={videoSource} type="video/mp4" />
</video>

css：

.Video {
    position: absolute; 
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

解决方法

您可以使用controls={false}强制隐藏控件：

const Demo = ({ videoSource }) => (
  <video
    controls={false}
    autoPlay
    muted
    loop
    className="Video"
  >
    <source src={videoSource} type="video/mp4" />
  </video>
);

ReactDOM.render(
  <Demo 
    videoSource="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" />,root
);

.Video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/** hide the snippet's console **/
.as-console-row {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>