Question

我正在一个React网站上工作，并且我在主页上使用视频背景，它在桌面版中效果很好，但是视频根本无法在移动设备上呈现

视频标签已经包含了自动播放和静音属性，我添加了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。如果您提供了链接和设备规格，我可以做更多研究。

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

1 个答案: