Javascript 元素'；s readyState是一无所有

我正在尝试加载一个视频，然后根据窗口的滚动播放该视频。我目前在Safari和Firefox中使用，但在Chrome中没有。我在Chrome中经常遇到的错误是： 未捕获的InvalidStateError:未能设置“HTMLMediaElement”的“currentTime”属性：元素的readyState为HAVE\u NOTHING

有人知道我做错了什么吗

function updateVideo(video) {

    var video = $('#trees').get(0);

    var videoLength = video.duration;
    var scrollPosition = $(document).scrollTop();

    video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;//(scrollPosition / SCROLL_SCRUB_SPEED) % videoLength;
    }

    $(window).scroll(function(e) {
        updateVideo();
    });

<video id="trees"><source src="/theme/pmc/files/video/trees_all.mov" type="video/quicktime"><source src="/theme/pmc/files/video/trees_all.webm" type="video/webm"></video>

函数更新视频（视频）{
var video=$（'#trees'）.get（0）；
var videoLength=video.duration；
var scrollPosition=$（document.scrollTop（）；
video.currentTime=（scrollPosition/（$（document.height（）-$（window.height（））*videoLength；/（scrollPosition/SCROLL\u SCRUB\u SPEED）%videoLength；
}
$（窗口）。滚动（功能（e）{
updateVideo（）；
});

在浏览器知道视频的

持续时间之前，每当您尝试设置
currentTime
时，都会抛出该错误。持续时间是“元数据”的一部分，元数据通常位于视频文件的头部，包括高度和宽度

通常，如果您的视频元素没有
preload
属性，浏览器将尝试至少在加载页面后不久加载元数据。但是，根据浏览器的具体情况、页面上的其他内容以及网络连接的速度，在您至少滚动一次之后，才可能发生这种情况

解决方案看起来像这样

/*
memoize video, window and document so you don't have to create and
garbage-collect new objects every time you scroll
*/
var video = $('#trees').get(0),
    $window = $(window),
    $document = $(document);

function updateVideo() {
    var duration = video.duration,
       scrollPosition = window.scrollY;
    if (duration) {
        video.currentTime = (scrollPosition / ($document.height() - $window.height())) * duration;
    }
}

// update video every time you scroll
$window.scroll(updateVideo);

// update video when metadata has loaded
$(video).on('loadedmetadata', updateVideo);

这会让错误消失。如果您尝试此操作，而
loadedmetadata
事件从未触发，请尝试将此添加到末尾以强制执行：

video.load();

编辑：定义并设置
scrollPosition
。下面是一个工作示例：
刚刚发现了一个代码笔，它的速度快了一点，并且用更少的代码执行几乎相同的操作：

是的，现在所有浏览器都会出现这种情况。我想这说明我也在当地工作。这可能是问题的一部分吗？怎么可能？控制台中的错误消息是什么？请参阅更新的代码和工作示例。那应该够了。原谅我，我是个白痴。当它看起来应该工作，但它没有工作时，别忘了重新启动浏览器。
// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option

// pause video on load
vid.pause();

// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function(){
    vid.pause();
};

// refresh video frames on interval for smoother playback
setInterval(function(){
    vid.currentTime = window.pageYOffset/400;
}, 40);