时间戳

首页 > 解决方案 > 为背景视频 ReactJS 禁用视频播放器

html - 为背景视频 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;
}

标签： htmlreactjsvideo

解决方案

您可以使用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>

推荐阅读