效果
思路
1.页面由video和div构成
<video id="bgvid" autoplay muted loop>
<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>DEMO</h1>
<p>使用HTML5,CSS3和JavaScript
<p><a href="javascript:void(0)"> 挺不错的</a></p>
<p>我觉得前端开发</p>
<p>是站在艺术和科技的十字路口</p>
<button>暂停</button>
</div>
2.将video设为全页面显示
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-size: cover;
transition: 1s opacity;
}
3.为div添加样式
#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;
}
4.JavaScript控制视频暂停或者播放
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
pauseButton.addEventListener("click", function () {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "暂停";
} else {
vid.pause();
pauseButton.innerHTML = "开始";
}
})
源码
https://github.com/iamcgt/Front-end-development.git