开发者问题收集

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

2015-12-23
242

在这段代码中,我有 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);
1个回答

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

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

localStorage.setItem(video.currentTime,value)

要检索它,您必须使用

localStorage.getItem(video.currentTime,value)

Michael Ericson
2015-12-23