javascript - 无法通过设置 video.currentTime = {value} 来设置 video.currentTime

Question

在这段代码中，我有 video.currentTime = {value}而且效果很好。

但是当我尝试按 Crtl+Shift+R 重新加载页面时，它会将 video.currentTime 设置为 0，无论我何时点击进度条。这是为什么？

window.addEventListener('load', function(){

var video = document.getElementById('video');
var playButton = document.getElementById('play-button');
var pbar = document.getElementById('pbar');
var update;
var pbarContainer = document.getElementById('pbar-container');

video.load();
video.addEventListener('canplay', function(){
    playButton.addEventListener('click', playOrPause, false);
    pbarContainer.addEventListener('click', skip, false);
}, false);

var skip = function(ev) {
    var mouseX = ev.pageX - pbarContainer.offsetLeft;
    var width = window.getComputedStyle(pbarContainer).getPropertyValue('width');
    width = parseFloat(width.substr(0, width.length - 2));

    video.currentTime = (mouseX/width)*video.duration;
};


var updatePlayer = function() {
    var percentage = (video.currentTime/video.duration)*100;
    pbar.style.width = percentage + '%';
    if(video.ended) {
        window.clearInterval(update);
        playButton.src = 'images/replay.png';
    }
};

var playOrPause = function(){

    if(video.paused) {
        video.play();
        playButton.src = 'images/pause.png';
        update = setInterval(updatePlayer, 30);
    } else {
        video.pause();
        playButton.src = 'images/play.png';
        window.clearInterval(update);
    }
};

//video.addEventListener('click', playOrPause(playButton), false);
}, false);

Answer 1

刷新页面会停止所有代码的执行并重置所有变量，基本上从头开始。

如果您希望变量在刷新页面后仍然保留，请设置 localStorage，您的值将保存在浏览器上。如果您在 localStorage 下的“资源”部分中打开开发人员工具，则可以找到它们:

localStorage.setItem(video.currentTime,value)

要检索它，您必须使用

localStorage.getItem(video.currentTime,value)