首页 > 原创文章 > 软件开发 > 查看文章

VideoJs宽度高度自适应100%的方法

所属分类:软件开发 来源: 丁老师原创 发布时间:2022-12-31 15:26 浏览: 11012 IP属地: 深圳

videojs是一款非常不错的html video播放器插件,很多同学经常在群里问我,说丁老师这个videojs怎么设置为宽度或者高度自适应呢,不想把video的width和height写死,有没有什么办法呢。

丁老师经过研究发现啊,videojs自带两个class,一个是vjs-16-9,一个是vjs-4-3,只要使用这两个样式类,就不需要设置高度和宽度,就自动按照16:9或者4:3的比率去自适应了,使用方法如下:

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

同时,不想使用class样式来控制的话,还可以通过data-setup初始化的参数来设置,设置data-setup的fluid为true即可,实现代码如下:

<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...>
...
</video>

瞧,就是这么简单!

标签:

相关文章

Nginx环境下php页面总是缓存刷新也不行...

nginx环境下php页面总是缓存刷新也不行的解决办法

uniapp编辑器自动提示功能导致输入错误的...

在使用uniapp编写代码时,uniapp的编辑器有一个自动提示功能,就是当你输入字符的时候,会自动弹出对应可能会输入的代码,查了下这个功能叫做“代码助手”。在使用代码助手时,经常会产生很麻烦的问题,比如在写CSS代码时,当需要输入数字...

鸿蒙应用打包和发布的流程介绍

最近有个项目,是开发鸿蒙APP,涉及到鸿蒙应用的打包和发布的流程,特此开个文章做一下介绍。打包应用鸿蒙应用主要通过DevEco Studio进行打包,打包后生成的是HAP文件 (HarmonyOS Application Package...

IDEA IDE换行自动显示的}括号如何去掉

在使用idea旗下的产品,如intellij idea,php storm,web storm时,有的时候编辑前端页面JS,在换行时经常会自动出现个}大括号,这一点程序不是很智能,其实后边都已经有括号了。比如下图这样:那么如何解决这个问...

推荐文章

APP/小程序/网站/对接微信支付常见问题解...

现在微信支付已经超越支付宝,成为中国最广泛的在线支付方式。作为互联网电子商务服务商,如何开通对接微信支付?如何使用微信支付呢?丁老师整理一篇微信支付常见的问题解答。一、如何开通微信支付?微信支付可以在微信支付官网(https://pay.w...

Uniapp开发微信小程序怎么模拟位置?

废话不多说,直接上货。在微信开发者工具调试栏,找到Sensor(传感器)。Geolocation,勾选启用,下边输入经纬度即可!

微信小程序和APP有什么区别?到底该做哪个?

经常有新客户咨询丁老师,微信小程序和APP有什么区别呢?一般情况下来说应该做哪个?今天丁老师就这个问题做一下介绍。微信小程序和APP的区别微信小程序微信小程序微信平台运行,无需下载安装,用户通过微信搜索、扫码或者朋友分享就能直接使用,用完即...

Tortoise Svn出现No Path ...

在日常开发过程中,突然发现svn无法提交和更新,出现“no path or pathfile specified on the command line”的错误,网上搜了一圈百度 google 以及stack overflow都没找到真正能...

当前在线
免费咨询