reactjs - 自动播放背景视频无法在移动设备上呈现
问题描述
我正在开发一个反应网站,并且我正在为主页使用视频背景,它在桌面版本中完美运行,但视频根本无法在移动设备上呈现
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;
}
解决方案
推荐阅读
- python - Pandas groupby 计算百分比变化列
- c# - 使用 C# 和 Microsoft.TeamFoundationServer.Client 将代码签入到 TFS 2017
- vba - fillseries vba excel
- java - 访问 Hashmap 但导致 NullPointerException
- php - MySQL:快速字数统计
- javascript - 为什么 onclick() 在按钮标签内不起作用?
- javascript - AutoFocus TinyMCE Editor TextArea inside Bootstrap Modal 显示 Modal 时
- sql - SQL - 从“选择返回的多行”中收集值
- python - 使用 Sympy 和 Scipy 求解欠定方程组和约束系统
- reactjs - 使用有效负载在 Redux 中指定增量项