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

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

所属分类:软件开发 来源: 丁老师原创 发布时间:2022-12-31 15:26 浏览: 12944 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和小程序同步开发兼容性有哪些点需要注意

现在用Uniapp做APP/小程序,是很快速、很成熟的方案了,除非是要求特别挑剔的项目,否则一般不会用Android/iOS原生开发。除了Uniapp,还有Taro、Rax、Flutter等工具,都是可以实现一套代码,多终端应用的生成。...

FastAdmin 顶部navtab 刷新页...

在使用fastadmin的日常开发中,新增了一个订单模块order,在各项功能都开发完毕后,偶然发现这个页面每次一点刷新(浏览器刷新),顶部navtab就不显示"订单管理"4个字,图标也恢复成了默认的,在网上搜了相关...

鸿蒙应用打包和发布的流程介绍

最近有个项目,是开发鸿蒙APP,涉及到鸿蒙应用的打包和发布的流程,特此开个文章做一下介绍。打包应用鸿蒙应用主要通过DevEco Studio进行打包,打包后生成的是HAP文件 (HarmonyOS Application Package...

Css中Flex布局下两边高度不一致的解决方...

在css中,flex弹性布局可以实现内部对象左右、垂直的对齐,在多个html对象中,设置flex后一般情况下,内部的对象高度是保持一致的。比如一个div设置了flex,内部有3个div,这3个div的高度以最高的一个div高度值为准保持...

推荐文章

FastAdmin add/edit方法不更...

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

Hbuilder开发APP时,找不到真机的解...

正确的USB连线,其次打开开发者选项、USB调试,这些都是老生常谈,就不说了。在确保以上操作无误后,如果还找不到真机,关闭IDE,然后去adb的目录下,即HBuilderX\plugins\launcher\tools\adbs,把adb....

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

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

Tortoise Svn出现No Path ...

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