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

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

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

瞧,就是这么简单!

标签:

相关文章

鸿蒙应用打包和发布的流程介绍

最近有个项目,是开发鸿蒙APP,涉及到鸿蒙应用的打包和发布的流程,特此开个文章做一下介绍。打包应用鸿蒙应用主要通过DevEco Studio进行打包,打包后生成的是HAP文件 (HarmonyOS Application Package...

织梦dedecms上传图片提示Upload ...

最近有读者来函咨询,dedecms在上传图片时提示“Upload filetype not allow”,怎么也上传不了。丁老师在百度查询了后,发现问题的根本原因是php没有上传权限的原因造成的,一般来说是php的临时上传目录,没有写权...

Java如何在请求中加入参数?

在Java中,提交请求时加入参数有两种方法:一、把参数直接写在url中,如:如请求url是https://www.aaa.com,参数是name=kevin,gender=2,那么可以直接把请求url写成https://www.aaa....

Telegram Mini小程序开发介绍

Telegram Mini小程序基于Javascript开发语言,是集成在Telegram应用内的轻量化网页应用。类似微信小程序,可以直接在Telegram对话或群组中运行而无需单独下载。Telegram小程序支持的应用程序:Teleg...

推荐文章

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

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

抖音小程序开发的流程是什么?

开发抖音小程序是一个涉及多个步骤的过程,需要准备相应的资料和工具。以下是开发抖音小程序需要准备的资料和步骤:1. 入驻抖音开发平台:首先,你需要在抖音开放平台注册一个开发者账号,并完成主体认证和对公认证。如果未完成认证,你可以在沙盒工具中创...

Mui的toast修改位置居中

mui的toast默认是在底部的,并且没有参数设置位置,经过研究发现可以通过修改css的方式设置位置,具体方法如下:1.mui toast设置type为divmui.toast('hello', { type: 'd...

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

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