视频墙布局

Question

给定stage ew by stageH的阶段，以及N个(任意)大小的视频srcVideoW by srcVideoH，如何最好地布局视频以覆盖最大的覆盖率?视频可以放大或缩小，但应该按比例缩放(纵向或横向)与匹配的高度。

let VideoCount = $("#Stage").find('video').length;
let stageW = $("#Stage").outerWidth();
let stageH = $("#Stage").outerHeight();
$("#Stage").find('video').each(function() {
var srcVideoW = this.videoWidth;
var srcVideoH = this.videoHeight;
var BestWidth = 0;
var BestHeight = 0;
// Magical Javascript goes here
$(this).css("float", "left");
$(this).css("display", "inline-block");
$(this).css("width", BestWidth+"px");
$(this).css("height", BestHeight+"px");
}

最可能的布局是:如果只有1个视频，它可能会占用舞台的宽度和高度，如果2个那么并排，3个也在一行，从大约4个开始，它可能最好是两个在第一行，两个在第二行....等等

Answer 1

这就是你要找的:https://alicunde.github.io/Videoconference-Dish-CSS-JS/