创建 HTML5 视频磁贴

creating HTML5 video tile

本文关键字：视频 HTML5 创建      更新时间：2023-09-26

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

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

不是 100% 确定这个问题，但在你的 css 中尝试一下。

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

只需使用 fitvids.js 即可使您的视频响应迅速。您甚至可以添加自己的格式，但它带有 youtube、vimeo 等基础知识。我什至在其中添加了幻灯片共享演示文稿，它起作用了：

http://fitvidsjs.com/

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

相关文章：