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

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

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

瞧,就是这么简单!

标签:

相关文章

支付宝公钥私钥配置方法

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

Wordpress安装时出现Error es...

群里有个做外贸的朋友,准备使用wordpress建个外贸站,但是自己在安装时,却安装失败,提示“Error establishing a database connection”,这是什么原因,该怎么解决呢?故障分析:1.Error e...

Uniapp picker 多列数据更新后不...

在uniapp中,使用picker multiSelector多列联动选择时,单独更新某列数据后,在前端没有显示,之前的写法:this.data_list[1]=[]; var aaa=[]; aaa.push(1); aaa.push...

FastAdmin后台列表默认分页数量由10...

没那么多废话,直接上修改方法public\assets\js\require-table.jspageSize: Config.pagesize || localStorage.getItem("pagesize")...

推荐文章

Uniapp开发小程序内的图片扫码

在使用uniapp开发的小程序内,打开图片,长按没有弹出菜单,无法扫码,此时只需在图片上加入show-menu-by-longpress即可完整代码:<image :src="picture" mode="...

如何删除idea软件搜索时的find mas...

在使用idea系列的配套软件时,如intellij idea、Php Storm、Web Strom时,在搜索文件时,右上角的file mask可以筛选指定类型的文件。但是有时候可能会输入错误,产生多个记录,而且没办法删除,在以后的开发中经...

BT宝塔升级方法

由老版本7.2自动升级时,会出现很多问题,建议在终端手动升级。升级命令:curl http://download.bt.cn/install/update_panel.sh|bash

Tortoise Svn出现No Path ...

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

当前在线
免费咨询