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

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

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

瞧,就是这么简单!

标签:

相关文章

怎么样合并一个或多个PDF文件?

经常有小伙伴问丁老师,说扫描出来的PDF图片,都是一个一个的,怎么样把他们合并成一个文件呢?我说你去下载一个PDF工具就好了呀,有某某PDF共阅读器、编辑器嘛。小伙伴说不行呀丁老师,因为网上的这些PDF工具有以下缺点:1.体积太大。动辄...

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

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

Java如何在请求中加入参数?

在Java中,提交请求时加入参数有两种方法:一、把参数直接写在url中,如:如请求url是https://www.aaa.com,参数是name=kevin,gender=2,那么可以直接把请求url写成https://www.aaa....

C#开发的Winform程序如何把dll放到...

有同学咨询,使用Visual Studio工具C#开发的Winform程序,生成后软件目录全是大量dll文件,看起来杂乱无章,有没有什么办法能让他统一放到一个文件夹里边呢?丁老师对此问题进行解答。为什么会产生大量的dll文件?因为在使用...

推荐文章

安装fastadmin提示“你所浏览的页面暂...

安装fastadmin,打开后提示"你所浏览的页面暂时无法访问",无法安装,是因为程序的runtime没有写权限,需要对runtime目录,添加写权限。解决方法:windows:右键目录,写入按钮打勾。如果不行,在“安全...

PhpStorm怎么取消html文件中sty...

phpstorm程序中,在打开html时总会出现对 style属性的折叠和隐藏,这样在检查代码的时候非常不直观,容易漏掉很多东西,非常的不方便,如图:

CodeIgniter框架URL如果去掉in...

在使用PHP框架CI时,有个很恶心的地方就是他的URL需要带上index.php,比如我要建一个user模块,想要实现www.xxx.com/user/的效果,但是在CI框架下必须要www.xxx.com/index.php/user这样才...

小程序开发的流程费用以及需要什么准备材料?

小程序定制开发的流程和费用,以及需要准备的材料,(包括但不限于微信小程序、百度小程序、支付宝小程序、抖音小程序、小红书小程序)具体如下:一、小程序开发的行政流程1.确定软件开发公司,和开发公司签订合同2.甲方支付首期开发费用3.乙方开始进行...

当前在线
免费咨询