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

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

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

瞧,就是这么简单!

标签:

相关文章

Uniapp开发微信小程序怎么模拟位置?

废话不多说,直接上货。在微信开发者工具调试栏,找到Sensor(传感器)。Geolocation,勾选启用,下边输入经纬度即可!

PHP分割字符串换行的方法nl2br

有同学提问,使用PHP在处理textarea提交的内容时,里边内容是换行了的,怎么把这些内容给解析为ul li格式呢?如:<ul<li aaa</li<li bbb </li</ul 其实很简单,使用...

用AI制作的软件是否可以申请软著?丁老师解答

目前随着AI的不断发展,Vibe Coding的持续普及,诞生了大量的AI软件开发工具(IDE),通过这些工具,可以让一个不懂软件开发的人、没有任何技术能力的人使用AI来开发出想要的软件、网站等等。有同学咨询丁老师,使用AI开发的软件,...

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

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

推荐文章

微信公众号如何集成对接网站网页

微信公众号可以把官网的网页集成进去吗?想通过微信公众号实现打开公司网站的页面,具体要怎么实现呢?其实这个功能,可以通过微信菜单的方式来实现...

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

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

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

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

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

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