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

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

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

瞧,就是这么简单!

标签:

相关文章

在VSCode中调试Deno

在vs code中,可以通过配置.vscode/launch.json来debug deno项目,具体方法如下:1.创建.vscode/launch.json;2.找到<entry_point ,替换为你的script脚本;3.点...

Css3中position:sticky无效...

有同学在前端写css代码时,遇到问题,使用的css3,写的是position:sticky,想要内容滚动到该区域,该区域自动置顶滑动。但一直无效,经过丁老师研究后发现,该区域没有定义高度,而使用position:sticky时,是必须要...

Elasticsearch Entitlem...

有同学咨询,在使用Elasticsearch时,出现WARN提示信息的,如何解决这个问题?如果不影响使用的话,是否可以隐藏掉这个警告信息呢?警告信息如下:[WARN][org.elasticsearch.entitlement.runt...

Uniapp开发微信小程序怎么模拟位置?

废话不多说,直接上货。在微信开发者工具调试栏,找到Sensor(传感器)。Geolocation,勾选启用,下边输入经纬度即可!

推荐文章

微信小程序和APP有什么区别?到底该做哪个?

经常有新客户咨询丁老师,微信小程序和APP有什么区别呢?一般情况下来说应该做哪个?今天丁老师就这个问题做一下介绍。微信小程序和APP的区别微信小程序微信小程序微信平台运行,无需下载安装,用户通过微信搜索、扫码或者朋友分享就能直接使用,用完即...

Python3.12提示windows No...

在使用python3.12时突然遇到提示windows No module named distutils,研究了一下,把解决办法分享出来。1.安装 setuptools,它现在也提供 distutils;2.从第三方源(如系统软件包)载入...

Uniapp开发微信小程序时,微信开发者工具...

在使用uniapp开发微信小程序,微信开发者工具调试时,明明已经给了获取位置权限,但还是提示需要打开gps获取位置,具体解决办法如下:打开uniapp的manifest.json文件,切换到源码模式,找到mp-weixin节点"p...

微信公众号如何集成对接网站网页

微信公众号可以把官网的网页集成进去吗?想通过微信公众号实现打开公司网站的页面,具体要怎么实现呢?其实这个功能,可以通过微信菜单的方式来实现...

当前在线
免费咨询