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

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

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

瞧,就是这么简单!

相关文章

nginx环境下php页面总是缓存刷新也不行...

nginx环境下php页面总是缓存刷新也不行的解决办法

支付宝支付提示“暂时无法获取订单信息,请稍候...

支付宝支付提示“暂时无法获取订单信息,请稍候再试”的解决办法

微信支付常见问题及解决办法

微信支付常见问题及解决办法

文件名中包含空格,下载时报404出错的办法

最近有同学提问,在开发的软件项目中,用户上传的文件名中包含空格,导致用户点击下载时,提示找不到该文件,404的错误,这种问题怎么解决呢?首先,引起这种问题的原因就是文件名中有空格,导致了下载的url无法形成完成的链接。我分别做了两个下载...

推荐文章

mysql 1267 Illegal mix...

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

fastadmin add/edit方法不更...

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

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

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

您的nahimic驱动程序似乎已经过期的解决...

打开电脑的Nahimic软件,提示“您的nahimic驱动程序似乎已经过期,无法启动”,然后需要点击链接更新驱动,但点击进去后,也找不到什么驱动。经过研究发现解决办法:1.使用SDI安装,即SnappyDriverInstaller1.23...