温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准
00:00
好的,我们继续啊,那上一节课呢,我们是利用这个image代替video标签呢,进行了性能优化。嗯,那上一节课呢,我们在播放的时候呢,嗯,你发现了这个问题对吧,就是说每次我们点击播放的时候呢。啊,视频的两边呢,有两个小黑框,那上一节课呢,我也提到了啊这个呢,是因为本身视频的内容呢,跟我们视频这个video标签的大小不一致。啊导致的,所以呢,才会出现这个边框。那这样的话呢,每次点击啊,你看它有个小黑框。其实挺难受的,而且每次我们点击的时候呢,其实还有一个什么,有个视觉差。对吧,看着不爽,那其实要解决这个问题呢,也挺简单的啊啊现在呢,我们来到video啊官网。那么往下翻啊,我们找找看啊,有没有什么能帮我们解决这个问题的属性,对吧?来啊,往上一点啊,在这呢啊,就在post poster的上面啊,叫object fit,当视频大小与video容器不一致的时候,视频的表现形式。
01:06
默认的叫抗体。对吧,那还有什么值呢,这没有明确的说啊,那这个时候呢,哎,我们找到这个object fit啊往下找,那么下面呢,肯定会有对它的详细说明说明。那这个时候呢,大家看啊,Object fit的合法值,Content是包含,哎,Fair是填充,Cover是覆盖。嗯,那这个时候呢,我们可以看一下,测一下这两个feel填充是什么意思,来我们去给他设一下,首先呢,我们要设的这个属性呢,叫object fit。对吧,那么对应的值呢?啊,我们可以来这个feel啊,我们看一眼过来。好的,那这个时候大家看啊走。你看就没有这个黑框了,说白了哎,干嘛呀,它会把这个视频呢,拉伸到我们这个,我们设的宽高啊,这么大,你看下面这个啊,他也没有了,没有问题。
02:05
好的,那这个呢是feel,我们再看一下这个cover来过来。好的,那现在呢,我们换成cover,以后呢,我们再看一眼走。啊,这是这个好啊,这是这个注意啊,那现在呢,其实用feel和cover呢,它都没有这个问题了,都没有这个问题了,一会我去播放,嗯,再换一个。这个走啊,那是cover,它是用视频的大小呢,直接把我们这个覆盖掉了。对吧,啊,其实呢,也是有一个呃,自动啊等比例去往大拉伸的一个效果。那在这里面呢,咱们就看需求啊,到底是要用few还是power啊都可以啊,那在这里呢,我就用power啊覆盖去给它啊解决这个问题好的,那这节课呢,我们主要是解决了这个视频内容和我们这个标签大小啊,Video标签大小不一致的问题。好,那这节课呢,我们先讲到这里。
我来说两句