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

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

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

瞧,就是这么简单!

相关文章

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

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

python中md5转16进制的方法

在Python中,如果要把md5值,转换为16进制,可以使用hashlib库的hexdigest方法。具体代码为:from hashlib import md5secret = '123456789'print(md5(...

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

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

my97datepicker在iframe页...

问题描述:在使用iframe的框架系统中,左侧菜单,右侧为iframe页面区域,由左侧的菜单控制右侧的iframe链接显示页面。每个页面都由my97datepicker,在刷新网页首次打开右侧页面内容时,触发WdatePicker显示日...

推荐文章

mysql导入文件,source命令/php...

用phpmyadmin导入大数据库文件时,容易502badgateway,可以直接在linux上用mysql原生命令导入。1.上传sql文件到目录用Xshell登录服务器,将迁移过来的sql文件移到home目录下,方便下一步的操作,站长之前...

pdf和图片怎么添加水印

pdf添加水印,可以使用专业的pdf工具,如AdobeAcrobat、福昕PDF阅读器等,支持文字和图片形式的添加水印,支持透明度设置、水印位置设置等。图片添加水印,可以使用photoshop软件,但是photoshop太大了,而且使用起来...

mysql 1267 Illegal mix...

这个问题,用普通sql语句查询,好解决,把表的字符编码改为对应的就可以了。但在使用视图查询时,比如select'aaa'astypefromxxx;select*fromviewwheretype='aaa'...

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

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