我有一个背景视频（html5视频元素），固定位置宽度和高度100％，上面有一些文字。当我向下滚动时，视频必须快进，速度必须取决于我的内容（文本）的长度。因此，当您滚动到底部时，视频将会结束。
我找到了这个例子：https://codepen.io/anon/pen/GxDJg
到目前为止，我有这个： https://codepen.io/rluijten/project/editor/AOywwy/
const accelAmount = 0.01;
const bounceAmount = 0.91;
const video = document.getElementById('video');
const main = document.querySelector('main');
let scrollPos = main.scrollTop / 30;
let targetScrollPos = scrollPos;
let accel = 0;
video.pause();
main.addEventListener('scroll', () => {
targetScrollPos = main.scrollTop / 30;
});
setInterval(() => {
// accelerate towards the target:
accel += (targetScrollPos - scrollPos) * accelAmount;
// clamp the acceleration so that it doesnt go too fast
if (accel > 1) accel = 1;
if (accel < -1) accel = -1;
// move the video scroll position according to the acceleration and how much bouncing you selected:
scrollPos = (scrollPos + accel) * bounceAmount + (targetScrollPos * (1 - bounceAmount));
// update video playback
video.currentTime = scrollPos;
video.pause();
}, 40);
现在我试图让我的内容的高度等于我的视频的持续时间。但我真的没有想法实现这一目标。有什么想法吗？
答案 0 :(得分：0)
const video = document.getElementById('video');
const main = document.querySelector('main');
let targetScrollPos = main.scrollTop;
let targetScrollMax = main.scrollHeight;
let step = 0.1;
let buffer = [];
let playing = false;
video.pause();
function playVideo(pos) {
if (playing) {
return buffer.push(pos);
}
playing = true;
var dt = pos - video.currentTime > 0 ? 1 : -1,
sid = setInterval(() => {
video.currentTime += dt * step;
video.pause();
if (dt > 0 ? video.currentTime >= pos : video.currentTime <= pos) {
video.currentTime = pos;
video.pause();
if (buffer.length) {
playing = false;
playVideo(buffer.pop()); // just last one is relevant
buffer = [];
}
playing = false;
clearInterval(sid);
}
}, step * 1000);
}
main.addEventListener('scroll', (e) => {
playVideo(video.duration * main.scrollTop / main.scrollHeight);
}); body,
html {
height: 100%;
margin: 0;
padding: 0;
}
main {
overflow: scroll;
overflow-x: hidden;
height: 100%;
}
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.video-container__video {
position: absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content-block {
position: relative;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
padding: 50px 60px 0;
overflow: hidden;
background-color: white;
z-index: 1;
opacity: 0.5;
}
.content-block:first-child {
margin-top: 150px;
}
.content-block__title {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 30px;
}
.content-block__text {
margin-bottom: 30px;
} <html>
<head>
<title>Video Scroll experiment</title>
</head>
<body>
<div class="video-container">
<video id="video" class="video-container__video">
<source src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<main class="main">
<div class="content-block">
<p class="content-block__text">
Applications for September 2017 entry are now closed. Please see the FAQ section for application deadlines.
</p>
<p class="content-block__text">
A unique course in the field of theatre and performance practice, this one-year MA course allows students with a strong, demonstrable background in performance to re-examine and broaden their skills in a truly experimental and highly collaborative framework.
</p>
<p class="content-block__text">
The emphasis throughout the year is on devised and ensemble work, as you will advance your understanding of performance from a post-Stanislavski standpoint.
</p>
<p class="content-block__text">
The course, validated by King’s College London, one of the world’s top 20 universities, explores non-mainstream theatre craft internationally. Read about some of graduates in the downloadable PDF
</p>
</div>
<div class="content-block">
<p class="content-block__text">
The course is built around three strands:
</p>
<p class="content-block__text">
Acting and Performance: Practice and Methodology - Working from the foundation of the Stanislavski ‘system’, you will be introduced to the approaches and responses of later practitioners, including Brecht, Copeau, Meyerhold, and Grotowski. International
historical context is given through exploring the improvisational and physical practice, developments in experimental theatre internationally, new writing, and performance since the early 20th Century. Development of Performance - This dual aspect
of the course builds on your strengths and skills, whilst improving areas where you are less experienced. The first strand supports you as you refine and improve your understanding of how to develop as an individual within an ensemble environment.
The second covers vocal and physical performance training, supplemented by Commedia, creative writing, improvisation, and singing. Scene Study - Scene study is woven throughout the course and provides a forum for you to develop and experiment
with the techniques you are learning.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">Course Details</h2>
<p class="content-block__text">
Our full time, three-year BA in Acting (conservatoire training) develops a high level of technical facility, flexibility, individuality and imagination. The training provides skills in acting, voice, singing and movement, and students apply these skills
in a wide variety of media including theatre, television, film and radio.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
<div class="content-block">
<h2 class="content-block__title">The Program</h2>
<p class="content-block__text">
The training is classically based because we believe this provides the best foundation for acting in any form or media. However, the training also includes a thorough grounding in contemporary plays and styles as well as classes in camera and microphone
technique. Your work will be continuously assessed with extensive individual feedback through regular sessions, written reports, and one-to-one tutorials.
</p>
</div>
</main>
<footer class="footer"></footer>
</body>
</html>