Javascript 根据内容的高度更改滚动视频播放器的当前时间

我有一个背景视频（html5视频元素），固定位置宽度和高度100%，上面有一些文字。当我向下滚动时，视频必须快进，速度必须取决于我的内容（文本）的长度。因此，当您滚动到底部时，视频将结束

我发现这个例子：

到目前为止，我有一个：

const-accelmount=0.01；
常数bounceAmount=0.91；
const video=document.getElementById（'video'）；
const main=document.querySelector（'main'）；
设scrollPos=main.scrollTop/30；
让targetScrollPos=scrollPos；
设加速度=0；
video.pause（）；
main.addEventListener（'scroll'，（）=>{
targetScrollPos=main.scrollTop/30；
});
设置间隔（（）=>{
//加速实现目标：
accel+=（targetScrollPos-scrollPos）*accelAmount；
//夹紧加速度，使其不会过快
如果（加速度>1）加速度=1；
如果（加速度<-1）加速度=-1；
//根据加速度和选择的反弹量移动视频滚动位置：
scrollPos=（scrollPos+加速）*bounceAmount+（targetScrollPos*（1-bounceAmount））；
//更新视频播放
video.currentTime=scrollPos；
video.pause（）；
}, 40);

现在，我试图使我的内容的高度等于我的视频的持续时间。但我真的没有办法做到这一点。有什么想法吗？

const video=document.getElementById（'video'）；
const main=document.querySelector（'main'）；
让targetScrollPos=main.scrollTop；
设targetScrollMax=main.scrollHeight；
设阶跃=0.1；
让缓冲区=[]；
让玩=假；
video.pause（）；
功能播放视频（pos）{
如果（玩）{
返回缓冲推送（pos）；
}
玩=真；
var dt=pos-video.currentTime>0？1:-1，
sid=setInterval（（）=>{
video.currentTime+=dt*步长；
video.pause（）；
如果（dt>0？video.currentTime>=位置：video.currentTime{
播放视频（video.duration*main.scrollTop/main.scrollHeight）；
})；

body，
html{
身高：100%；
保证金：0；
填充：0；
}
主要{
溢出：滚动；
溢出x：隐藏；
身高：100%；
}
.视频容器{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；
身高：100%；
z指数：0；
}
.video-container\u视频{
位置：绝对位置；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.内容块{
位置：相对位置；
宽度：50%；
左边距：自动；
右边距：自动；
边缘底部：2px；
填充：50px 60px 0；
溢出：隐藏；
背景色：白色；
z指数：1；
不透明度：0.5；
}
.内容块：第一个子{
边缘顶部：150px；
}
.内容块标题{
字号：18px；
字体大小：粗体；
文本转换：大写；
边缘底部：30px；
}
.content-block\u文本{
边缘底部：30px；
}

视频卷轴实验
您的浏览器不支持视频标记。

2017年9月入学申请现已截止。请参阅常见问题部分了解申请截止日期。


这门为期一年的文学硕士课程是戏剧和表演实践领域的一门独特课程，它让具有强大、可证明的表演背景的学生能够在真正的实验性和高度协作的框架内重新审视和拓展他们的技能。


全年的重点是设计和合奏工作，因为你将从后斯坦尼斯拉夫斯基的角度提高对表演的理解。


经国王批准的课程™s伦敦学院，世界一流的学院之一™美国20所顶尖大学，探索国际上非主流的戏剧艺术。在可下载的PDF中阅读一些毕业生的信息


本课程围绕三条主线展开：


表演与表演：实践与方法论——从斯坦尼斯拉夫斯基系统的工作谈起™, 我们将向您介绍后来的实践者的方法和反应，包括布莱希特、科博、迈耶霍尔德和格罗托夫斯基
通过探索20世纪初以来的即兴和物理实践、国际实验戏剧的发展、新创作和表演，给出了历史背景。表演的发展——这一双重方面
当然，这门课程以你的优势和技能为基础，同时提高你经验不足的领域。在你完善和提高对如何在整体环境中作为个人发展的理解时，第一条线将为你提供支持。
第二个课程包括声乐和身体表演训练，辅之以大众传媒、创意写作、即兴创作和歌唱。场景研究-场景研究贯穿整个课程，为您提供一个发展和实验的论坛
使用您正在学习的技术。

课程详情

我们的全职、三年制表演学士（音乐学院培训）培养了高水平的技术设施、灵活性、个性和想象力
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);