3

我已经制作了自定义视频控件，但是当视频播放时，我的进度条没有在全屏中相应地拉伸。因此，当视频到达结尾时，条形图大约是宽度的 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;
}

不是 fullScreen 你可以看到进度条几乎在容器的末尾（黄色）： 在此处输入图像描述

视频中的相同位置，进度条在容器末尾附近没有： 在此处输入图像描述

4

1 回答 1

1

这就是我解决它的方法：

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