我制作了一个着陆页,其中视频以表格的背景播放 它在台式机上工作正常,但我使用Chrome检查了我的Android设备,后台视频无法播放。
任何人都可以帮我解决问题。
以下是指向fiddle的链接。
HTML:
<p>
<video autoplay="" id="video" loop=""><source src="http://www.mygreencity.in/Enquiry.mp4" type="video/webm" /> <source src="Enquiry.mp4" type="video/mp4" /></video>
</p>
<form action="" class="form" method="post">
<p><input name="enq_name" placeholder="Full Name" required="" type="text" autocomplete="off" alt="Full Name" title="Full Name"/></p>
<p><input name="enq_mobile" placeholder="Mobile Number" required="" type="number" autocomplete="off" alt="Number" title="Number"/></p>
<p><input name="enq_email" placeholder="Email" required="" type="email" autocomplete="off" alt="Email ID" title="Email ID"/></p>
<input class="button button-block" name="enq_submit" type="submit" value="Go To Site" alt="Go To Site" title="Go To Site"/></form>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #1ab188;
-webkit-transition: .5s ease;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 80px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
h1 {
text-align: center;
color: #ffffff;
font-weight: 300;
margin: 0 0 40px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
}
input, textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #1ab188;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #1ab188;
color: #ffffff;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #179b77;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
p {
margin-bottom: 40px;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: #fff;
background-size: cover;
transition: 1s opacity;
}
div{
margin:20px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
答案 0 :(得分:3)
你应该看看这种jQuery plugin。
否则,您应该提供一些.mp4
和.webm
格式备选方案,而不是仅采用.ogv
格式,以便与浏览器具有更好的兼容性和设备。
你还应该有一个&#34;后备&#34;像下面示例中的poster="videos/poster.png"
一样的图像。如果这些格式都不适用于所使用的浏览器/平台,则会显示此图像而不是视频。
您必须将视频转换为.webm
和.ogv
。
由于我仍然在寻找一个好的转换工具(转换之后没有额外的丑陋横幅),我无法就此给出一些建议。< / p>
<video id="bgVideo" autoplay poster="videos/poster.png">
<source src="http://www.mygreencity.in/Enquiry.mp4" type="video/mp4"/>
<source src="http://www.mygreencity.in/Enquiry.webm" type="video/webm"/>
<source src="http://www.mygreencity.in/Enquiry.ogv" type="video/ogg"/>
</video>
祝你好运&#39;
答案 1 :(得分:2)
CSS:
#section-video video {
display: block;
}
在相应的css文件中给出diplay块而不是none。
答案 2 :(得分:0)
您需要为视频元素添加更多属性
<video autoplay loop muted playsinline id="video-background" poster="images/poster.jpg">
Safari和Chrome移动版对移动视频的行为进行了更改。默认情况下,只有将视频静音后,它才能自动播放。但是对于webkit / iO,您还需要第二个属性。 在线播放。使用此属性可以使其内联播放,而不是跳转到全屏视频。
如果您定位到iOS 11,还请确保您的移动设备不在低功耗模式下运行。如果您使用的是Chrome浏览器(Android版),则数据保护程序模式也会阻止自动播放,因此不会显示视频。无论如何都没有。