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

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

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

瞧,就是这么简单!

标签:

相关文章

微信公众号获取用户的手机号的方法?

有同学在问,微信公众号,可以获取微信用户的手机号吗?答案是肯定的,当然可以!但是,因为现在越来越注重用户隐私以及数据收集,微信公众号是不能直接任意获取用户手机号的,获取用户的手机号码,也不是任意微信公众号都可以做到的,有一定的要求和限制...

Shopify模板主题如何设计?全流程规范指...

有使用Shopify做跨境电商的同学咨询,丁老师我想改一下Shopify网站的模板,做一个自定义的主题,该怎么做呢?今天丁老师就这个问题做一下介绍。Shopify创建模板主题的条件1.安装Node.js 20.10以上版本。2.安装No...

订单管理系统的设计与制作

订单管理系统是商业运营中较多的应用,包含商业订单的录入、编辑、查询、跟进、支付,以及对应财务资金的统筹和管理,下面是丁老师设计的订单管理系统功能架构,以功能模块的形式,分享出来给大家。一、商家管理商家管理是订单系统中的基础信息,可以理解...

网易企业邮箱客户端SSL端口设置

最近经常配置OJS系统的(Open Journal Systems期刊管理系统 )发信功能,客户使用的是网易企业邮箱,根据网易企业邮箱帮助中心的文档显示,smtp服务加密ssl的端口是994,如图:结果设置了以后,怎么也发不了邮件,就在...

推荐文章

Photoshop宽度像素和网页宽度像素不一...

在用photoshop设计时,有的同学会发现,在网页中设置的宽度1000px,截屏后,再用photoshop打开后测量同样图像的宽度时,这个宽度就不是1000像素,而是1200多甚至1300多,是个很奇怪的问题,丁老师检查了photosho...

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

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

微信小程序二次开发需要准备的资料以及流程

最近丁老师软件开发团队收到几个微信小程序二次开发的订单,客户想对他们现有的小程序进行版本迭代和功能升级,但是好多客户在提供资料时都表达不清楚,不是这个不知道就是那个不懂,今天丁老师就微信小程序二次开发,需要准备哪些资料以及流程等问题做一下介...

Javascript复制对象改变原值的解决办...

在进行vue开发中,经常会遇到复制对象,赋值新对象后,原对象值被改变的问题,举个例子:let old={ "a":1, "b":2 } let new=old; new['c']=3;...