【问题标题】:Responsive HTML5 Video where aspect ratio can change宽高比可以改变的响应式 HTML5 视频
【发布时间】:2013-08-11 16:51:23
【问题描述】:

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

问题在于,当设置此选项时,视频的高度始终与您看到的 in this fiddle 相同。所以我需要(我认为)是一个脚本,它可以检测纵横比,因为 纵横比会改变。我找到了一个类似 over here 的脚本,但它是为 iframe YouTube 或 Vimeo 等视频设计的。

我试图通过将$allVideos 的值更改为$("video[class^='video-js']"), 来修改脚本,但它似乎不起作用。任何人都可以看看my Fiddle 并尝试告诉我出了什么问题以及如何解决它?


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

【问题讨论】:

    标签: javascript html css


    【解决方案1】:

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

    【讨论】:

    • .vjs-tech 是 video.js 在页面加载时添加的必需类。请在加载后检查视频播放器以查看此内容。
    猜你喜欢
    • 2015-10-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-20
    • 1970-01-01
    • 2013-04-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多