1

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

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

有想法该怎么解决这个吗？onload 事件改变了视频宽度的解释方式之后会发生什么？如果您能启发我，非常感谢！

整页的 url：在 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();
}

}
4

0 回答 0