全屏 HTML5 视频进度条不拉伸答案

【问题标题】：HTML5 Video Progress bar in fullscreen not stretching全屏 HTML5 视频进度条不拉伸
【发布时间】：2013-01-26 15:47:42
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript html css html5-video

【解决方案1】：

我就是这样解决的：

我在更新函数中声明 barSize 变量等于包含，然后我设置了一个间隔以连续运行更新函数，以便在包含更改大小时调整进度条的大小（全屏/退出全屏） .我觉得 setInterval 可能不是解决这个问题的最佳方法，因为它在预告片页面之外运行（没有视频播放器），但它似乎并没有影响我页面的性能，所以它是解决方案我一起去了。但是在控制台中，您会看到 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();
}

【讨论】：