我试图将视频作为背景视频放在我的网站上。我研究了很多而且没有用,我也不知道为什么。
在我的HTML上我有:
<video id="bgVideo" controls preload="true" autoplay loop muted>
<source src="../images/Home_Page.mp4" type="video/mp4" >
<source src="../images/Home_Page.ogv" type="video/ogg" >
<source src="../images/Home_Page.webm" type="video/webm" >
</video>
<script src="scripts/html5ext.js" type="text/javascript"></script>
在我的CSS上我有:
body
{
background: url("../images/Home_Page.png") no-repeat fixed center;
}
video#bgVideo {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;
}
但是,视频无法播放且背景保持白色。有什么建议可以解决这个问题??
非常感谢
答案 0 :(得分:2)
这应该有效
<video id="bgVideo" controls preload="true" autoplay loop muted>
<source src="Home_Page.mp4" type="video/mp4" >
<source src="Home_Page.ogv" type="video/ogv" >
<source src="Home_Page.webm" type="video/webm" >
</video>
此外,您应该创建一个htaccess文件/修改您的htaccess文件以包含以下内容
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm
执行此操作的有用教程是here
答案 1 :(得分:0)
<div class="video-container">
<video autoplay loop muted width="100%">
<source src="Path To mp4 Video" type="video/mp4" />
<source src="Path To webm Video" type="video/webm" />
</video>
<div >
<img src="path to Image" alt="">
</div>
<!-- If Videos are not supported this image will act as cover image-->
</div>
答案 2 :(得分:0)
此代码适用于我提供全屏视频。
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
if (window.matchMedia('(prefers-reduced-motion)').matches) {
vid.removeAttribute("autoplay");
vid.pause();
pauseButton.innerHTML = "Paused";
}
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
&#13;
body {
margin: 0;
background: #000;
}
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: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.stopfade {
opacity: .5;
}
#polina {
font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
font-weight:100;
background: rgba(0,0,0,0.3);
color: white;
padding: 2rem;
width: 33%;
margin:2rem;
float: right;
font-size: 1.2rem;
}
h1 {
font-size: 3rem;
text-transform: uppercase;
margin-top: 0;
letter-spacing: .3rem;
}
#polina button {
display: block;
width: 80%;
padding: .4rem;
border: none;
margin: 1rem auto;
font-size: 1.3rem;
background: rgba(255,255,255,0.23);
color: #fff;
border-radius: 3px;
cursor: pointer;
transition: .3s background;
}
#polina button:hover {
background: rgba(0,0,0,0.5);
}
a {
display: inline-block;
color: #fff;
text-decoration: none;
background:rgba(0,0,0,0.5);
padding: .5rem;
transition: .6s background;
}
a:hover{
background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) {
div{width:70%;}
}
@media screen and (max-device-width: 800px) {
html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
&#13;
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>try this</h1>
<p>your text or elements</p>
<button>Pause</button>
</div>
&#13;