javascript - 宽高比可以改变的响应式 HTML5 视频

标签 javascript html css

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

问题是,当设置这个时,视频的高度总是和你看到的一样in this fiddle .所以我需要的(我认为)是一个脚本,它可以检测纵横比,因为纵横比会改变。我找到了一个这样的脚本 over here然而,它是为 YouTube 或 Vimeo 等 iframe 视频设计的。

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


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

最佳答案

只需从 .video-js .vjs-tech 中删除 height: 100%;。这会自动从给定的宽度 100% 获取纵横比。

关于javascript - 宽高比可以改变的响应式 HTML5 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18169927/

相关文章:

javascript - 如何触发Graphic的点击事件?

javascript - 无法从 Material UI 中的卡片内容中删除 padding-bottom

javascript - 如何在同一 HTML 中执行后操作后显示部分 HTML?

javascript - Html5 Canvas : alternative for drawImage()

jquery - 使用 JQuery slider 时如何将 DIV 保持在同一行?

html - CSS 的 Flex 属性隐藏 WebChat 中的滚动条

css - 设置高度 100% 不工作

html - extjs - 在网页上居中一个 formPanel

javascript - 交替显示 2 次 ng-repeats 的结果

html - 在不影响子元素的情况下降低父 div 中背景图像的不透明度? (推特 Bootstrap )