HTML5 Video not displaying on Mobile Devices?
I am attempting to display text on top of a video background. I have used simple HTML5 and CSS to do this. My code works great for desktop sites using Chrome, Safari and Firefox, but when a user views the page on an Android or iPhone device... only the text shows up and the video refuses to play (I am testing on an iPhone 6s Plus and a Samsung S5).
Here is a live preview of the page in question: http://buzzanimatedvideos.com/video-test/
And here is the CSS & HTML I am using:
.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>
Awesome. I did not know that. That said, I solved the autoplay on mobile by converting the video into a GIF. I hide the video below 640px and display the GIF instead. The GIF just keeps looping regardless of user input, so it works quite well.
链接地址: http://www.djcxy.com/p/84044.html下一篇: HTML5视频无法在移动设备上显示?