自动播放背景视频无法在移动设备上呈现

Question

我正在开发一个 React 网站，并且我正在为主页使用视频背景，它在桌面版本中完美运行，但视频根本无法在移动设备上呈现

video 标签已经包含 autoPlay 和 mute 属性，我添加了 playInline 但仍然没有任何反应

这里是html代码：

<header className="v-header container">
                <div className="fullscreen-video-wrap">
                    <video src={code} autoPlay muted loop playsInline type="video/mp4"></video>
                </div>
                <div className="header-overlay"></div>
                <div className="header-content text-md-center">
                    <h1>Night'Art+</h1>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id temporibus perferendis necessitatibus numquam amet impedit explicabo? Debitis quasi ullam aperiam!</p>
                    <Button inverted basic size='massive'>Join us</Button>
                </div>
            </header>

和css代码：

  .v-header{
    height:100vh;
    display:flex;
    align-items:center;
    color:#fff;
  }

  .container{
    max-width:960px;
    padding-left:1rem;
    padding-right:1rem;
    margin:auto;
    text-align:center;
  }

  .fullscreen-video-wrap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    overflow:hidden;
  }

  .fullscreen-video-wrap video{
    min-height:100%;
    min-width:100%;
  }

  .header-overlay{
    height:100vh;
    position: absolute;
    top:0;
    left:0;
    width:100vw;
    z-index:1;
    background-image: linear-gradient(to right, #4300ab, #ff0a6c);
    opacity:0.7;
  }

  .header-content{
    z-index:2;
    justify-content: center;
  }

  .header-content h1{
    font-size:50px;
    margin-bottom:0;
  }

  .header-content p{
    font-size:1.5rem;
    display:block;
  }

Answer 1

根据this site，移动设备需要满足一些条件才能允许自动播放（视频大小、用户手势、音轨等）。大多数浏览器都会考虑用户的数据消耗。更多信息here。如果您提供链接和您的设备规格，我可以进行更多研究。