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

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

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

瞧,就是这么简单!

标签:

相关文章

Svelte框架介绍及环境配置运行

Svelte框架介绍与React、Vue、Angular等传统框架不同,Svelte是一个独特的前端框架,它采用编译时渲染而非运行时渲染,具有如下特点:无虚拟dom:Svelte在构建时将组件编译为高效的原生JavaScript代码,运...

如何使用Android Studio构建发布...

有同学咨询,想知道怎么样使用Android Studio来构建Flutter应用项目,今天丁老师来教你。在Android Studio中,选择顶部菜单的Build-Flutter-Build APk,就可以生成Flutter项目的APK...

Tortoise Svn出现No Path ...

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

抖音小程序开发的流程是什么?

开发抖音小程序是一个涉及多个步骤的过程,需要准备相应的资料和工具。以下是开发抖音小程序需要准备的资料和步骤:1. 入驻抖音开发平台:首先,你需要在抖音开放平台注册一个开发者账号,并完成主体认证和对公认证。如果未完成认证,你可以在沙盒工具...

推荐文章

Uniapp开发小程序和app时,根据登录状...

在使用uniapp开发app和小程序时,经常会用到打开app/小程序时,根据登录状态判断是显示首页还是跳转登录页的功能。此功能在app.vue的onlaunch方法中定义,方法如下:onLaunch: function() { const ...

Photoshop宽度像素和网页宽度像素不一...

在用photoshop设计时,有的同学会发现,在网页中设置的宽度1000px,截屏后,再用photoshop打开后测量同样图像的宽度时,这个宽度就不是1000像素,而是1200多甚至1300多,是个很奇怪的问题,丁老师检查了photosho...

宝塔"在未指定SSL默认站点时,未开启SSL...

宝塔系统相关问题解决方法

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

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