javascript - 全屏 HTML5 视频进度条不拉伸(stretch)

Question

我已经制作了自定义视频控件，但是当视频正在播放时，我的进度条在全屏模式下没有相应地拉伸(stretch)。因此，当视频到达结尾时，条形图大约是宽度的 1/3。

我相信这与 barSize 设置为等于全屏之前容器的大小有关。条形大小按百分比设置，因此它会根据 wrapper 进行调整。我不知道如何使用 JS 使进度条调整到包含栏。 (不能使用 JQuery)

JS:

 bar = document.getElementById('defaultBar');
        barSize = bar.offsetWidth;
        progress = document.getElementById('progressBar');

function move(e){
    if(!media.paused && !media.ended){
        var mouseX= e.offsetX;
        newTime=((mouseX*media.duration)/barSize);
        media.currentTime=newTime;
        progress.style.width=mouseX+'px';
    }
} 

HTML:

<div id="defaultBar">
     <div id="progressBar"></div>
</div>

CSS:

#defaultBar{
position:relative;
float:left;
width:59.5%;
height: 22px;
padding:0px;
border: 0px solid black;
background:yellow;
margin: 0px;
cursor: pointer;
}

#progressBar{
position:relative;
float:left;
height: 50%;
margin: 5px 0px;
border: 0px solid black;
background:green;
cursor: pointer;
}

不是全屏你可以看到进度条几乎在容器的末尾(黄色):

视频中的相同位置，进度条在容器末尾附近没有:

Answer 1

我是这样解决的:

我在update函数中声明了barSize变量等于contain，然后我设置了一个时间间隔不断运行update函数，以便在contain改变大小时(全屏/退出全屏)调整进度条的大小.我觉得 setInterval 可能不是解决此问题的最佳方法，因为它在预告片页面之外运行(那里没有视频播放器)，但它似乎不会影响我的页面的性能，所以它是解决方案我去了。不过在 consol 中，您会看到 bar.offsetWidth not defined 错误不断累加，但正如我所说，性能不会受到影响。

updateBar=setInterval(update, 50);

function update(){
    barSize = bar.offsetWidth;
    if(!media.ended){
        var size = parseInt((media.currentTime/media.duration)*barSize);
        progress.style.width = size +'px';
    }else{
        progress.style.width='0px';
        playButton.firstChild.src = "images/icons/play.png";
        window.clearInterval(updateBar);
    }
    updateTimeDisplay();
}