我也有类似的问题。我做了一个幻灯片,幻灯片包含各种物体,其中一些是各种尺寸的视频。我没有找到任何概念上的解决方案,所以我找到了一个窍门。
我已经明确地规定在标签的所有真实视频尺寸,并收集所有这些信息:
var vids = document.getElementsByClassName("vid"); // videos
var vidl = vids.length;
var vidH = [ ];
var vidW = [ ];
// Get original widths and heights of videos
for (i=0; i
vidH.push(vids[i].height);
vidW.push(vids[i].width);
}
然后(必要时)我定义的窗口大小,如下所示:
// Current inner height of the browser window (in pixels)
var iH = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
// Current inner width of the browser window (in pixels)
var iW = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
要将矩形重新缩放到另一个矩形中,我们必须找到最小比例:
var r, rh, rw;
// Scale videos to fit window
for (i=0; i
rh=iH/vidH[i]; rw=iW/vidW[i]; r=Math.min(rh, rw);
if (rh>rw) {
vids[i].height=Math.floor(vidH[i]*r);
vids[i].width=iW;
}
else {
vids[i].height=iH-5;
vids[i].width=Math.floor(vidW[i]*r);
}
}
不幸的是,这里出现了一些额外的空间;在FireFox中,我发现它的最小值为5,我将窗口高度值(iH)取消为新的视频大小。