CODEWITHSUNDEEP
javascripthtmlcsshtml5-video
Batman
Batman

Reputation: 6353

HTML5 Video Progress bar in fullscreen not stretching

I've made custom video controls but when the video is playing my progress bar does not stretch accordingly in fullScreen. So by the time the video reaches the end the bar is about 1/3 of the width.

I believe it has something to do with the barSize being set equal to the size of the container before fullScreen. The bar size is set at percentage so it adjusts to the wrapper. I don't know how to make the progress bar adjust to the containing bar using JS. (can't use 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 you can see how progress bar is almost at the end of the container (yellow): enter image description here

Same position within the video, the progress bar is no where near the end of the container: enter image description here

Upvotes: 3

Views: 1841

Answers (1)

Batman
Batman

Reputation: 6353

This is how I solved it:

I declared the barSize variable in the update function to be equal to the contain, then I set an interval to continuously run the update function in order to adjust the size of the progress bar when the contain changes size (fullscree/exitFullscreen). I feel like the setInterval might not be the best way to solve this problem because it runs outside of the trailer page (where there is not video player) but it doesn't seem to affect the performance of my page in anyway so it's the solution I went with. In the consol though, you will see bar.offsetWidth not defined error continuously add up but like i said, performance isn't impacted. 

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

Upvotes: 1

Related Questions