响应式HTML5视频,纵横比可以更改

Responsive HTML5 Video where aspect ratio can change

本文关键字:HTML5 视频 响应      更新时间:2023-09-26

我正在尝试通过DesignModo使用video.js和Flat UI来设置HTML5视频播放器。我有一个问题,我需要让视频播放器响应,所以宽度需要是100%。

问题是,当设置这个时,视频的高度总是和你在小提琴上看到的一样。因此,我需要(我认为)一个脚本来检测纵横比,因为纵横比将发生变化。我在这里找到了一个这样的脚本,但它是为iframe视频设计的,比如YouTube或Vimeo。

我试图通过将$allVideos的值更改为$("video[class^='video-js']"),来修改脚本,但似乎没有成功。有人能看看我的Fiddle并告诉我出了什么问题以及如何解决吗?


顺便说一句,我知道字体文件和图像的链接出现了404,这是因为目前这些文件没有托管在我的服务器上,我只是在本地测试它们。

只需从.video-js .vjs-tech中删除height: 100%;。并且这将从给定的宽度自动获得高宽比100%。