如何隐藏Safari Mobile的html视频控件

Question

我目前正在使用视频作为我网站的背景，它在我的chrome浏览器中运行得很好，但当我使用safari时，它会在后台显示视频的视频控件。有没有什么方法可以隐藏这些控件，或者只是一种更好的方法将视频放在背景中？

这是我的背景视频代码

HTML

<video id = 'home-bg' src = {require('../assets/leojaden-video-bg-2.mp4')} muted loop autoPlay playsinline/>

CSS

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
#home-bg{
position: absolute;
filter: brightness(80%);
top: 0;
left: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
z-index: -1;
}
video::-webkit-media-controls {
display: none;
}

我在这个网站上使用reactjs，所以一个反应友好的解决方案会很有帮助！：(

Answer 1

您可以通过不向视频元素添加控件属性来隐藏控件。

<video autoplay playsinline></video>