创建 HTML5 视频磁贴答案

【问题标题】：creating HTML5 video tile创建 HTML5 视频磁贴
【发布时间】：2015-01-02 13:51:15
【问题描述】：

我正在尝试实现一个响应式视频“拼贴”，在灵活的网格中显示各种宽高比的视频。

在每一行中，视频具有相同的高度，但它们填充了 div 的水平宽度。由于每个视频的宽度和纵横比都是已知的，我认为计算高度很简单。不知道如何用 CSS + Javascript 实现它。任何人都可以帮忙吗？非常感谢。

【问题讨论】：

【解决方案1】：

不是 100% 确定这个问题，但可以在你的 CSS 中试试这个。

video {
    width: 100%;
    height: auto;
}

【讨论】：

嗨 Shak - 我打算添加一个模型图像来解释，但由于我是 stackoverflow 的新手，所以我不能。我把它放在保管箱里：dropbox.com/s/a8m7941w4i3jtks/…。这就是我努力实现的目标。假设我有 6 个不同大小和纵横比的视频。我想在这样的网格中显示它们。每行的宽度保持不变，视频会自动缩放以适应行，并尊重纵横比。

【解决方案2】：

只需使用 fitvids.js 即可让您的视频具有响应性。您甚至可以添加自己的格式，但它附带了 youtube、vimeo 等基础知识。我什至在其中添加了幻灯片共享演示文稿，并且效果很好：

只是 css 不起作用，因为它不首先弄清楚或知道视频的原始大小。

【讨论】：

谢谢！会看看这个！
我是stackoverflow的新手，所以我不能附加图片:)我在这里放了一个模拟，假设我们有6个不同纵横比的视频。这是 fitvidsjs 可以实现的吗？谢谢！ dropbox.com/s/a8m7941w4i3jtks/…
如果视频的原始纵横比正是您想要开始的尺寸，那么它可能是可能的。但是，如果它们都相同，我认为这将行不通。看看我创建的笔并试一试，它正在运行 fitvids 并在布局中包含三个示例视频：goo.gl/3KpGoJ
可能最简单的方法是使用每个 vid 的开始帧的屏幕截图，然后单击让视频在弹出窗口中开始。然后您可以更多地控制布局的外观。不过只有一个想法。