元素的readyState是HAVE_NOTHING

Question

我正在尝试加载视频,然后根据窗口的滚动播放该视频.我目前在Safari和Firefox中工作但不是Chrome.我在Chrome中遇到的错误是:Uncaught InvalidStateError:无法在'HTMLMediaElement'上设置'currentTime'属性:元素的readyState为HAVE_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>

Answer 1

只要您尝试currentTime在浏览器知道duration视频之前设置,就会抛出该错误.持续时间是"元数据"的一部分,"元数据"通常位于视频文件的标题中,包括高度和宽度.

通常,如果您的视频元素没有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.这是一个工作示例:http://jsbin.com/vurap/1/edit