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

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

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

瞧,就是这么简单!

相关文章

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

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

javascript中的字符串取第一个词的方...

有一个需求,要求在Javascript的字符串中,取出第一个词,注意,是字符串中的第一个单词,不是字符。研究了下,给出具体代码:var str="News media should foster peace and disar...

PHP网页报DOMDocument::loa...

PHP网站,网页打开不正常,显示“DOMDocument::loadHTML():TagheaderinvalidinEntity”错误代码,是怎么回事呢?其实,这是php程序中,使用了newDOMDocument的loadHTML来解...

R语言读取多个zip文件数据的方法

如何实现用R语言一次读取多个zip文件,获取zip文件里的数据?今天丁老师教给大家。R语言可以使用zip_vector函数,可以读取所有zip压缩文件里的内容,并且无需使用循环。代码示例:datprocessorC <- func...

推荐文章

mui的toast修改位置居中

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

fastadmin btn-dialog按钮...

fastadmin里自定义按钮的btn-dialog,弹出窗口时默认大小,设置了data-area无效,经过研究后,发现了可用的方法,直接上代码不废话:table.on('post-body.bs.table',functi...

如何删除idea软件搜索时的find mas...

在使用idea系列的配套软件时,如intellijidea、PhpStorm、WebStrom时,在搜索文件时,右上角的filemask可以筛选指定类型的文件。但是有时候可能会输入错误,产生多个记录,而且没办法删除,在以后的开发中经常会耽误...

mysql 1267 Illegal mix...

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