视频墙布局

Question

给定一个stageW 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/