HTML5视频进度条全屏不拉伸

Question

我制作了自定义视频控件，但是当视频播放时，我的进度条在fullScreen中没有相应的延伸。因此，当视频到达结尾时，条形宽度约为宽度的1/3。

我认为它与在大屏幕之前设置的barSize等于容器的大小有关。条形尺寸设置为百分比，因此它会根据包装进行调整。我不知道如何使用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;
}

不是fullScreen你可以看到进度条几乎就在容器的末尾（黄色）：

视频中的相同位置，进度条不在容器末端附近：

Answer 1

这就是我解决它的方法：

我声明更新函数中的barSize变量等于contains，然后我设置一个间隔来连续运行更新函数，以便在包含更改大小时调整进度条的大小（fullscree / exitFullscreen） 。我觉得setInterval可能不是解决这个问题的最佳方法，因为它在预告片页面之外运行（没有视频播放器），但它似乎不会影响我的页面的性能，所以它是解决方案我去了。虽然在consol中，你会看到bar.offsetWidth没有定义错误连续加起来，但就像我说的，性能没有受到影响。

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();
}