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

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

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

瞧,就是这么简单!

标签:

相关文章

FastAdmin btn-dialog按钮...

fastadmin里自定义按钮的btn-dialog,弹出窗口时默认大小,设置了data-area无效,经过研究后,发现了可用的方法,直接上代码不废话:table.on('post-body.bs.table',func...

在VSCode中调试Deno

在vs code中,可以通过配置.vscode/launch.json来debug deno项目,具体方法如下:1.创建.vscode/launch.json;2.找到<entry_point ,替换为你的script脚本;3.点...

R语言读取多个zip文件数据的方法

如何实现用R语言一次读取多个zip文件,获取zip文件里的数据?今天丁老师教给大家。R语言可以使用zip_vector函数,可以读取所有zip压缩文件里的内容,并且无需使用循环。代码示例:datprocessorC <- func...

BT宝塔升级方法

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

推荐文章

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

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

宝塔面板phpmyadmin数据库表导航树禁...

宝塔面板的phpmyadmin,默认数据库表导航树是每30个一页,非常的不直观,可以通过修改宝塔phpmyadmin配置文件的方式来禁止他分页。修改方法:1.进入服务器/www/server/phpmyadmin/phpmyadmin_随机...

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

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

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

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