html5视频：javascript在window.onload中错误地调整大小，但在其他地方正确吗？_Javascript_Html_Onload

html5视频：javascript在window.onload中错误地调整大小，但在其他地方正确吗？

javascript html

html5视频：javascript在window.onload中错误地调整大小，但在其他地方正确吗？,javascript,html,onload,Javascript,Html,Onload,我正在使用window.onload调用一个函数，该函数将视频的style.height和style.width设置为窗口中可能的最大值，同时保留纵横比。当在onload事件中调用此选项时，视频的左右两侧都有黑色条，当浏览器调整大小时，这些条会保留下来，并且似乎是视频或其容器的一部分？从那时起当我将resizevid函数保留在onload之外，并且只在onresize中调用它时，黑条就不存在了有没有办法解决这个问题？在改变视频宽度解释方式的onload事件之后会发生什么？如果你能启发我，非常

我正在使用window.onload调用一个函数，该函数将视频的style.height和style.width设置为窗口中可能的最大值，同时保留纵横比。当在onload事件中调用此选项时，视频的左右两侧都有黑色条，当浏览器调整大小时，这些条会保留下来，并且似乎是视频或其容器的一部分？从那时起

当我将resizevid函数保留在onload之外，并且只在onresize中调用它时，黑条就不存在了

有没有办法解决这个问题？在改变视频宽度解释方式的onload事件之后会发生什么？如果你能启发我，非常感谢你

完整页面的url: 在加载时使用resizevid：仅在onresize中使用resizevid：

守则摘录：风格：

html:

脚本：

window.onload = function() {
changevid();
resizevid();
}

function resizevid(){

//find out the viewport size

var viewportwidth;
var viewportheight;

if (typeof window.innerWidth != 'undefined'){
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0)
{
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
}


//get the aspect ratio of the video

var vidwidth = document.getElementById('myvideo').offsetWidth;
var vidheight = document.getElementById('myvideo').offsetHeight;
var aspratio = vidheight/vidwidth;

//set video to full height, find correct width
function vidTooTall(){
    d=document.getElementById('myvideo');
    var newheight = viewportheight+'px';
    var newwidth = viewportheight/aspratio;
    newwidth = newwidth+'px';
    d.style.height = newheight;
    d.style.width = newwidth;
}

//set video to full width, find correct height
function vidTooWide(){
    d=document.getElementById('myvideo');
    var newwidth = viewportwidth+'px';
    var newheight = aspratio*viewportwidth;
    newheight = newheight+'px';
    d.style.height = newheight;
    d.style.width = newwidth;
}
//if windowheight/windowwidth < vidheight/vidwidth
//video is too tall, else video is too wide

if(viewportwidth*aspratio>viewportheight){
        vidTooTall();
    }
else{
        vidTooWide();
}

}

<body onresize="resizevid();" align=center>
<video align=center id="myvideo" autoplay loop>
</video>
</body>

window.onload = function() {
changevid();
resizevid();
}

function resizevid(){

//find out the viewport size

var viewportwidth;
var viewportheight;

if (typeof window.innerWidth != 'undefined'){
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0)
{
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
}


//get the aspect ratio of the video

var vidwidth = document.getElementById('myvideo').offsetWidth;
var vidheight = document.getElementById('myvideo').offsetHeight;
var aspratio = vidheight/vidwidth;

//set video to full height, find correct width
function vidTooTall(){
    d=document.getElementById('myvideo');
    var newheight = viewportheight+'px';
    var newwidth = viewportheight/aspratio;
    newwidth = newwidth+'px';
    d.style.height = newheight;
    d.style.width = newwidth;
}

//set video to full width, find correct height
function vidTooWide(){
    d=document.getElementById('myvideo');
    var newwidth = viewportwidth+'px';
    var newheight = aspratio*viewportwidth;
    newheight = newheight+'px';
    d.style.height = newheight;
    d.style.width = newwidth;
}
//if windowheight/windowwidth < vidheight/vidwidth
//video is too tall, else video is too wide

if(viewportwidth*aspratio>viewportheight){
        vidTooTall();
    }
else{
        vidTooWide();
}

}