我正在尝试为窗口滚动事件的html5视频设置当前时间。基本上，这个想法是在滚动页面时在视频时间轴中向前或向后移动。
这里的例子做得很好，没有问题：http://codepen.io/ollieRogers/pen/lfeLc
这是代码：
// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option
// pause video on load
vid.pause();
// alternative & optimized implementation thanks to http://codepen.io/daveroma/
window.onscroll = function(){
vid.currentTime = window.pageYOffset/400;
};#set-height
display block
height 13500px
#v0
position fixed
top 0
left 0
width 100%
p font-family helvetica
font-size 24px<div id="set-height"></div>
<p id="time"></p>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm; codecs="vp8, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>但是当我用自己的视频尝试时，视频滞后：http://codepen.io/futurecrazy/pen/ZWGYBj
这是我的代码：
// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option
// pause video on load
vid.pause();
// alternative & optimized implementation thanks to http://codepen.io/daveroma/
window.onscroll = function(){
vid.currentTime = window.pageYOffset/400;
};#set-height
display block
height 13500px
#v0
position fixed
top 0
left 0
width 100%
p font-family helvetica
font-size 24px<div id="set-height"></div>
<p id="time"></p>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm" src="http://philippsokolov.com/fm-4.webm"></source>
<source type="video/ogg" src="http://philippsokolov.com/fm-4.ogv"></source>
<source type="video/mp4" src="http://philippsokolov.com/fm-4.m4v"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>我已经尝试了不同的视频压缩，但仍然无法解决问题。
将不胜感激任何帮助。
我遇到了类似的问题，问题是视频编码。
视频关键帧速率较低会导致延迟。
我的猜测是，更改video.currentTime会使浏览器的视频解码器搜索到最接近指定时间位置的关键帧，这对于具有罕见关键帧的视频可能需要一段时间。以更高的关键帧速率重新编码视频为我解决了这个问题。
请注意，可以使用 FFMPEG -g标志来控制关键帧间距。
配置视频流以寻求性能
我经历了完全相同的事情——解决起来多么痛苦！在四处闲逛之后，我注意到视频只有在seeked事件触发后才会明显改变。显然，每次您更新currentTime（就我而言，在任何滚动事件上）时，它都会启动一个新的搜索过程，这会延迟新currentTime的呈现，直到解决搜索过程。
我通过侦听seeking和seeked事件来修复它，并且仅在视频当前未查找时才更新 currentTime——让搜索过程完成，这样更新就不会不断堆积。
以下是我的脚本的相关部分：
let seeking = false;
heroVideo.addEventListener('seeking', function() {
seeking = true;
});
heroVideo.addEventListener('seeked', function() {
seeking = false;
});
function tick(lastKnownScrollPosition) {
if (!seeking) heroVideo.currentTime = lastKnownScrollPosition / 300;
}
let ticking = false;
window.addEventListener('scroll', function(e) {
const lastKnownScrollPosition = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
tick(lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
});
我在做同样的事情，但无法使用 HTML5
相反，我用ffmpeg从视频中提取帧并对其进行tar。然后，在浏览器端，我获取了tar，使用js-untar提取了各个JPG。从那里可以直接手动更改标签上的图像源，或使用画布来为视频设置动画。
如下所示：
let images = [];
fetch("assets/launch.tar").then(response => {
return response.arrayBuffer();
})
.then(buffer => untar(buffer))
.then(files => {
files.forEach((file) => {
let img = new Image();
img.src = file.getBlobUrl();
images.push(img);
});
});
let div = document.getElementById("yourDiv");
let frame = () => {
let scrolled = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
let currentFrame = Math.floor(scrolled * (images.length - 1));
let img = images[currentFrame];
img.decode().then(() => {
div.style.backgroundImage = `url(${img.src})`;
});
window.requestAnimationFrame(frame);
}
window.requestAnimationFrame(frame);