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

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

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

瞧,就是这么简单!

标签:

相关文章

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

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

Android Studio 打包APP制作...

在使用android studio打包app时,需要制作JKS证书,具体的命令如下:D:\Program Files\Java\jre1.8.0_301\bin keytool -genkey -v -keystore dlq6.jks...

Dedecms cookies泄漏导致SQL...

dedecms cookies泄漏导致SQL漏洞

Mysql 1267 Illegal mix...

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

推荐文章

性价比最高的内网穿透方案

内网穿透,是指外网可以访问内网,没有固定IP的服务器,所以需要中间件来进行通讯,目前稳定成熟的中间件软件,要么价格太贵,要么就是只能使用标准服务,不能完全的定制化。那么,到底有没有一个性价比最优的方案呢?回答是肯定的,答案就是使用云服务器+...

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

有同学反应,在使用photoshop时,忽然文件打不开了,先后试了下psd格式、jpg格式、png格式的,等等等等,全都打不开,重启了电脑也不行,这是怎么回事呢?经过丁老师研究后发现,这是因为安装的是非正版photoshop,在使用时,没有...

百度编辑器ueditor自动添加p标签换行的...

在实际工作中发现,有个编辑器每次保存或者修改后,都会自动在内容顶部和底部增加几行,烦人的很,一直找不到解决办法。后来发现原来是自己代码的问题。解决办法:内容在textarea中,不要换行不要写成:<textarea{content} ...

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

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