javascript - 视频墙布局

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 个开始，它可能是最好的两个第一排，第二排两个……等等

标签： javascriptvideolayout

Answer 1

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