视频墙布局

Question

给定 stageH 的 stageW 阶段，以及 srcVideoH 的（任意）大小 srcVideoW 的 N 个视频，如何最好地布局视频以覆盖最大的覆盖范围？视频可以放大或缩小，但应按比例（纵向或横向）缩放并匹配高度。

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/

视频墙布局

Video Wall Layout

javascript

video

layout