html5改变源视频的长宽比,HTML5视频配合宽度或高度

我也有类似的问题。我做了一个幻灯片，幻灯片包含各种物体，其中一些是各种尺寸的视频。我没有找到任何概念上的解决方案，所以我找到了一个窍门。

我已经明确地规定在标签的所有真实视频尺寸，并收集所有这些信息：

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)取消为新的视频大小。