首页 > 文章列表 > 相关知识 > 查看文章

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

所属分类:相关知识 来源: 丁老师原创 更新时间:2022-12-31 15:26 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>

瞧,就是这么简单!

dls6.jpg

相关文章

fastadmin add/edit方法不更...

问题:fastadmin的add/edit方法无法保存数据,检查了页面,name=row[&...

iwebshop使用redis提示Redis...

redis是一款很好的数据缓存套件,使用redis可以非常有效的减少对数据库的依赖。iweb...

uniapp开发小程序内的图片扫码

在使用uniapp开发的小程序内,打开图片,长按没有弹出菜单,无法扫码,此时只需在图片上加入...

python3.12提示windows No...

在使用python3.12时突然遇到提示windowsNomodulenameddistut...

推荐文章

windows11右键恢复经典模式的方法[亲...

windows11更新后,不管是桌面的右键,还是文件上点右键,都非常地别扭,而且也非常的卡顿...

photoshop打不开任何文件的解决方法

有同学反应,在使用photoshop时,忽然文件打不开了,先后试了下psd格式、jpg格式、...

使用photoshop编辑文字时,弹出的文字...

今天有同学在群里提问,在使用photoshop编辑文字时,经常会弹出一个文字选择的面板如图:...

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

用phpmyadmin导入大数据库文件时,容易502badgateway,可以直接在linu...

QQ咨询 微信咨询 电话咨询