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

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

所属分类:软件开发 来源: 丁老师原创 发布时间:2022-12-31 15:26 浏览: 12424 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>

瞧,就是这么简单!

标签:

相关文章

性价比最高的内网穿透方案

内网穿透,是指外网可以访问内网,没有固定IP的服务器,所以需要中间件来进行通讯,目前稳定成熟的中间件软件,要么价格太贵,要么就是只能使用标准服务,不能完全的定制化。那么,到底有没有一个性价比最优的方案呢?回答是肯定的,答案就是使用云服务...

最新微信小程序定制开发报价明细(附避坑指南)

一、开发前期基础费用(一)认证费用微信官方收取小程序认证费用,企业主体为300元/年。若已有认证过的公众号,可免费复用资质进行小程序认证。个人主体认证费用为30元/年,但个人开发者在小程序功能和应用场景上存在较多限制,如无法开通微信支付...

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

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

支付宝公钥私钥配置方法

支付宝支付接口公钥私钥写的很不清楚,即使是让多年的程序员配置起来也是很吃力。为了让大家在开发的过程中少走弯路,丁老师特意总结了一下配置方法

推荐文章

软件项目交付前要完成几项测试?如何测试?

在很多外包软件定制项目中,比如开发的APP/小程序、网站、业务管理系统等,甲方在项目验收时,评估的标准是软件功能是否达到预期,交付的内容和资料是否完整,软件整体是否可用,但除了上述内容,乙方还需要对即将交付的软件进行整体测试,包含多道测试流...

微信公众号如何集成对接网站网页

微信公众号可以把官网的网页集成进去吗?想通过微信公众号实现打开公司网站的页面,具体要怎么实现呢?其实这个功能,可以通过微信菜单的方式来实现...

photoshop打不开任何文件的解决方法

有同学反应,在使用photoshop时,忽然文件打不开了,先后试了下psd格式、jpg格式、png格式的,等等等等,全都打不开,重启了电脑也不行,这是怎么回事呢?经过丁老师研究后发现,这是因为安装的是非正版photoshop,在使用时,没有...

CI框架页面添加全局变量的方法

CI框架是一款很小却又非常强大的PHP程序框架,非常适合用来搭建中小型网站以及扩展程序。有同学问到,在使用CI框架时,比如要对全站的标题、公司信息、电话等设置一个全局变量,不用每个页面都写死,该怎么办呢?丁老师来教你:1.打开页面的控制器文...