HTML5 Video Progress bar in full screen not stretching
I've created custom video controls, but when the video is playing, the progress bar doesn't stretch accordingly in fullScreen. Thus, by the time the video reaches the end, the strip is about 1/3 wide.
I believe this is because barSize is set equal to the size of the container before fullScreen. The bar size is set as a percentage, so it adjusts to the wrapper. I don't know how to get the progress bar to customize to the panel using JS. (JQuery cannot be used)
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 full screen, you can see how the progress bar is almost at the end of the container (yellow):
At the same position in the video, the progress bar is not somewhere near the end of the container:
source to share
This is how I solved it:
I declared the variable barSize in the update function to be equal to the content, then I set the interval to run the update function continuously to adjust the progress bar size when the size of the change change (fullscreen / exitFullscreen), I feel like setInterval might not be the best way to solve this because it works outside of the trailer page (where there is no video player), but it doesn't seem to affect the performance of my page, so the solution I went with. In the console, however, you will see that the bar.offsetWidth undefined error keeps adding up, but as I said, there is no performance impact.
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();
}
source to share