html5 video 格式的视屏格式具体在哪里体验

今天的第一个任务,就是要让Video的大小能够满屏(适应父级div),换言之要判断高度、宽度,使之能够达到全屏的效果。

在过去的一个版本中,我们要想满屏,写了一段长长的js文件,来取高度宽度对比,之后再计算,居中也要通过js计算得出缩进值——很显然,我觉得这样不合理嘛。浪费了这么多资源在适应上,在***时不断改变,写入CSS,看着都心累,于是在想,能不能直接通过CSS解决这样一个问题呢(自适应+水平垂直居中)。

那么接下来,问题来了——本身我们的player,想要取图像的宽度高度时,直接调用height(),width()就可以取到,并进行定位,现在我们要怎么办呢?

实际上,在video标签中,有这样一个属性可以为我们使用:videoHeight&videoWidth,他获取的是video的高度和宽度(媒体本身),虽然不能直接使用,但我想,我们可以通过计算长宽比来解决这个问题。

这里我们使用window.onresize,这个可以***窗口大小的变化,大小变化中判断来计算值,剩下的,不用多说。

html5的video标签如何拉伸视频,使其变形并且适配div宽高比率?

object-fit属性的语法非常的简单:

  • fill:此值为boject-fit的默认值,替换内容的大小被设置为填充元素的内容框,也就是说,元素的内容扩大到完全填充容器的外形尺寸,即使这打破其内在的宽高比。

  • contain:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为一个包含元素的宽度和高度。也就是说,如果你在替换元素上设置一个明确的高度和宽度,此值将导致内容大小,完全在固定的比例显示,但仍在元素尺寸内显示。

  • cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。

  • none:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。

  • scale-down:当内容大小设置了non或contain,将导致具体对象变得更小。

参考资料

 

随机推荐