Question

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

当我将“resizevid”函数从onload中删除，并且仅在onresize中调用它时，黑条不存在。

有关如何解决此问题的任何想法？ onload事件后会发生什么变化，这会改变视频宽度的解释方式？非常感谢你，如果你能开导我的话！

整页的网址：在onload中使用resizevid： http://thebeach.name/video.html 仅在onresize中使用resizevid： http://thebeach.name/videores.html

代码摘录：式：

<style>
html, body, div, video{border:0px;margin:0px;padding:0px;background-color:black;vertical-align:top;text-align:center;}
video{width:100%}
</style>

HTML：

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

}

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

0 个答案: