HTML5視頻進度條全屏不拉伸

我製作了自定義視頻控件，但是當播放視頻時，我的進度條並未在全屏幕中相應拉伸。所以當視頻到達最後的時候，視頻寬度約爲1/3。HTML5視頻進度條全屏不拉伸

我認爲它與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; 
}

非全屏你可以看到進度條是如何幾乎在容器末端（黃色）： enter image description here

視頻中

相同的位置，進度條是靠近容器的末尾沒有其中： enter image description here

來源

2013-02-11 Batman

這是我如何解決它：

我宣佈在更新功能的barSize變量是等於包含，然後我設置一個間隔來連續運行更新函數，以便在包含更改大小（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(); 
}

來源

2013-02-24 19:32:03 Batman

HTML5視頻進度條全屏不拉伸

回答

相關問題