如何设置滚动视频的长度始终匹配页面的高度？ （可以随着 window 调整大小和不同设备而改变）

Question

我有以下代码，可以将视频的当前时间设置为页面的滚动位置：

var vid0 = document.getElementById('v0');
var scrollpos = 0; var targetscrollpos = 0; vid0.pause();  
 
window.onscroll = function(){ targetscrollpos = window.pageYOffset / 1700;};

setInterval(function(){   
    
  scrollpos += (targetscrollpos - scrollpos) * 0.25;
  vid0.currentTime = scrollpos; vid0.pause();
    
}, 40);

我的问题是，这与页面高度无关 - 因此您使用一个数字设置加速度，而不是根据页面高度计算该数字或以某种方式将页面高度与视频长度相关联，因此当用户滚动视频完全在文档一直滚动到结尾时结束。

这种情况下的播放速度将取决于文档长度，这绝对没问题并且在意料之中，我只是不知道如何解决这个问题。

有什么想法吗？

Answer 1

解决了。

var vid0 = document.getElementById('v0');
var scrollpos = 0; var targetscrollpos = 0; vid0.pause();    
    
window.onscroll = function(){     
    var vrate = document.body.scrollHeight / (vid0.duration * 1.1); 
    targetscrollpos = window.pageYOffset / vrate;};

setInterval(function(){   
  scrollpos += (targetscrollpos - scrollpos) * 0.25;
  vid0.currentTime = scrollpos; vid0.pause();   
}, 40);