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

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

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

瞧,就是这么简单!

相关文章

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

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

android store文件key生成方法

一、生成打开cmd,切换到jdk所在目录,如d:set PATH=%PATH%;"D:\Program Files\Java\jre1.8.0_301\bin"keytool -genkey -alias dengj...

微信支付接口设置fee_type=usd无效...

在开发微信支付,和微信统一下单接口对接时,发现传递的fee_type参数只能设置为'CNY',无法设置为'USD'、'HKD'等其他货币。官方文档上对fee_type参数的描述,可以支持多...

mysql 1267 Illegal mix...

这个问题,用普通sql语句查询,好解决,把表的字符编码改为对应的就可以了。但在使用视图查询时,比如select'aaa'astypefromxxx;select*fromviewwheretype='aaa...

推荐文章

fastadmin add/edit方法不更...

问题:fastadmin的add/edit方法无法保存数据,检查了页面,name=row['name']正常传送,检查controller,也是默认的方法,什么也没有动可就是无法保存数据。解决:经过仔细研究发现,原来是htm...

idea storm换行自动显示的}括号如何...

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

php拼装sql语句,换行查询出错的问题解决

在php代码中,遇到复杂的sql语句,需要拼装sql语句,如:$sql='id 10;'$sql=' and (status in(1,2,3,4,5) andid not in (select id from aa...

微信小程序开发生成普通二维码打开小程序的方法

在开发微信小程序的过程中,生成的是带有logo的小程序二维码,并且这个二维码不是通用的二维码,而是只能用微信打开的专属二维码,如图:遇到这样一个需求,生成的二维码要方形的通用二维码,并且不能带有小程序的logo。这种该怎么实现呢?经过查询,...