在页面上跳滚动刷新
我想将全屏背景视频作为“背景：url（'img'）封面中心”。我是由JS做到的，但是我在页面上遇到了问题。
当我的视口的最低部分位置高于＆lt; h2＆gt; content＆lt;/h2＆gt;的中心时，我将在某些像素中跳高。在下一个刷新中，我将获得相同的效果，直到到达页面顶部。
我发现的唯一修复程序是：删除＆lt; video＆gt;，但这看起来不是一个很好的解决方案。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
html, body, main {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
section {
display: block;
width: 100%;
height: 100%;
background-color: rgb(68, 72, 89);
overflow: hidden;
position: relative;
}
.section-1-colorize {
z-index: 3;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #0b1d2a;
opacity: 0.65;
}
#background-video {
position: absolute;
z-index: 3;
overflow: hidden;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.s2, .s3 {
display: flex;
color: #fff;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 3em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.s3 {
background-color: #0b1d2a;
}
</style>
</head>
<body>
<main>
<section>
<video autoplay muted loop id="background-video">
<!-- <source> appearing by JS code below -->
</video>
<div class="section-1-colorize"></div>
<span style="position: absolute; z-index: 5; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px;">Hello, World!</span>
</section>
<section class="s2">
<h1>Any</h1>
<h2>Content</h2>
<h1>HERE</h1>
</section>
<section class="s3">
<h1>Any</h1>
<h2>Content2</h2>
<h1>HERE</h1>
</section>
</main>
<script>
var video = document.getElementById('background-video');
var source = document.createElement('source');
source.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4';
source.type = 'video/mp4';
video.appendChild(source);
// Appending source with src and type
video.load();
// Simulating "background-size: cover;" for video
video.onloadeddata = function () {
function solution() { // Calculating what should be used "width" or "height" 100%
var video = document.getElementById('background-video');
var math_1 = Math.round(window.innerWidth / window.innerHeight*100)/100;
var math_2 = Math.round(video.videoWidth / video.videoHeight*100)/100;
if(math_1 > math_2) {
video.style = "width: 100%"
} else {
video.style = "height: 100%"
}
}
// Tracking resize and then recalculating
window.addEventListener('resize', solution);
solution()
}
</script>
</body>
</html>
I wanted to make fullscreen background video as "background: url('img') cover center". I made It by JS, but I'm having a problem on page refresh.
When my bottom part of viewport locating higher than center of <h2>Content</h2> on page refresh I will get jumped higher for some pixels. And on next refreshes I will get the same effect till I get to the top of the page.
The only fix I found: remove <video>, but this doesn't looks like a good solution.
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
html, body, main {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
section {
display: block;
width: 100%;
height: 100%;
background-color: rgb(68, 72, 89);
overflow: hidden;
position: relative;
}
.section-1-colorize {
z-index: 3;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #0b1d2a;
opacity: 0.65;
}
#background-video {
position: absolute;
z-index: 3;
overflow: hidden;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.s2, .s3 {
display: flex;
color: #fff;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 3em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.s3 {
background-color: #0b1d2a;
}
</style>
</head>
<body>
<main>
<section>
<video autoplay muted loop id="background-video">
<!-- <source> appearing by JS code below -->
</video>
<div class="section-1-colorize"></div>
<span style="position: absolute; z-index: 5; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px;">Hello, World!</span>
</section>
<section class="s2">
<h1>Any</h1>
<h2>Content</h2>
<h1>HERE</h1>
</section>
<section class="s3">
<h1>Any</h1>
<h2>Content2</h2>
<h1>HERE</h1>
</section>
</main>
<script>
var video = document.getElementById('background-video');
var source = document.createElement('source');
source.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4';
source.type = 'video/mp4';
video.appendChild(source);
// Appending source with src and type
video.load();
// Simulating "background-size: cover;" for video
video.onloadeddata = function () {
function solution() { // Calculating what should be used "width" or "height" 100%
var video = document.getElementById('background-video');
var math_1 = Math.round(window.innerWidth / window.innerHeight*100)/100;
var math_2 = Math.round(video.videoWidth / video.videoHeight*100)/100;
if(math_1 > math_2) {
video.style = "width: 100%"
} else {
video.style = "height: 100%"
}
}
// Tracking resize and then recalculating
window.addEventListener('resize', solution);
solution()
}
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
解决方案：将视频用CSS包裹到块中：
Solution: wrap video into block with CSS: