我正在尝试在视频背景上显示文字。我使用简单的HTML5和CSS来做到这一点。我的代码适用于使用Chrome,Safari和Firefox的桌面版网站,但是当用户在Android或iPhone设备上查看该页面时...只显示文本并且视频拒绝播放(我正在iPhone 6s Plus上进行测试)和三星S5)。
以下是相关网页的实时预览:http://buzzanimatedvideos.com/video-test/
这是CSS&我正在使用的HTML:
.header-unit {
background: #fff;
border: 0 solid #fff;
height: 500px;
border: none;
position: relative;
padding: 0;
overflow: hidden;
text-align: center;
margin: 0 auto;
}
.video_container {
text-align: center;
margin: 0 auto;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
.video-overlay {
position: relative;
z-index: 999;
text-align: center;
margin: 0 auto;
}
.video-overlay-color {
background-color: rgba(0,0,0,0.5);
position: absolute;
width: 100%;
height: 100%;
top: 0%;
bottom: 0;
left: auto;
right: auto;
margin: 0 auto;
text-align: center;
}
.video-overlay-content {
position: absolute;
z-index: 9999;
opacity: 1;
width: 100%;
height: 100%;
top: 25%;
bottom: 0;
left: auto;
right: auto;
margin: 0 auto;
text-align: center;
}
.video-overlay-content h1 {
max-width: 640px;
color: #fff;
margin: 0 auto;
text-align: center;
font-size: 3.1rem;
}
.video-overlay-content p {
margin-top: 1rem;
}

<div class="video-overlay">
<div class="header-unit">
<div class="video_container">
<video poster="/wp-content/themes/buzz/vid/video-still.jpg" preload autoplay loop>
<source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.mp4" type="video/mp4" />
<source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.webm" type="video/webm" />
<source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.ogv" type="video/ogg" />
</video>
</div>
</div>
<div class="video-overlay-color">
<div class="video-overlay-content">
<h1>ANIMATED VIDEOS THAT ENTERTAIN, EXPLAIN & GAIN NEW CUSTOMERS</h1>
<p><a href="/portfolio/" class="button large-alt">WATCH OUR VIDEOS</a></p>
</div>
</div>
</div>
&#13;
有谁知道这是什么问题?我一直在寻找某种类型的线索,但我一无所有。 = /感谢您的帮助!
答案 0 :(得分:0)
真棒。我不知道。也就是说,我通过将视频转换为GIF解决了手机上的自动播放问题。我将视频隐藏在640px以下并显示GIF。无论用户输入如何,GIF都会保持循环,因此效果非常好。