让视频始终居中的四种简单方法

前段时间看到一个有意思的视频展示效果,简而言之就是左右两个视频总是显示各自中间的部分。文章作者通过 JS 同时改变每个视频的视窗宽度和视频的位置来实现,属于底层操作,我觉得应该可以更简单一些,只要让视频始终处于容器中间就不用对视频进行位移了。本来想看看文章中提到的 beoplay 页面里是如何做的,结果已经打不开了。。没关系,反正我也做出来了,而且找到了4种方法,CSS 和 JS 均只控制 width,居中则由浏览器自动完成,请看效果

当时看到这个效果的时候,首先就想到了 flex 布局,因为常规布局下当图片以及视频内容宽度超过容器宽度时,常用的 text-aglin:center 和 margin:0 auto 已经无法让内容处于容器的中间,不行不行,给容器加上 overflow:hidden 也不行,但 flex 布局的居中却可以轻松实现此需求。

然后又在学习过程中,想到了另外3种办法:

object-fit 版:可以说它天生就用来干这事的,因为它控制的不是 video 或者 img 元素,而是其内容本身,其详细介绍可以看这篇文章。由于与其搭配的 object-position 默认就是居中,所以 css 里就只写了 object-fit。另外因为偷懒,用于同时控制两个视频宽度的 JS 我就照搬了文章作者的,感谢 ^_^。

absolute 版:我们熟知对一个元素使用 absolute 定位,上下左右均为0,margin 为 auto,可以让它神奇的居中,并且若容器高度小于元素高度,元素也是居中的,可惜我们想要的是容器宽度小于内容宽度时也能居中无法实现,于是,请出了另一位嘉宾 writing-mode,其相关介绍,给容器设置 writing-mode 为 vertical-rl/lr 后,不论容器宽度是多少,视频也能居中了。所以方法准确的说应该是 absolute + writing-mode 版。

background 版:这个方法目前只适用于 Firefox 浏览器,用到了其私有属性 -moz-element,原理是把一个 video 元素作为另一个元素的背景,居中起来就很好办了,center。。。。

可能的方法:有一种跟 flex 类似的布局方式 grid,不过由于其只适用于 IE 浏览器,我就不浪费生命测试了,有时间的小伙伴可以试试。

 

目前我就想到这几种方法,如果你有其他方法,欢迎与大家一起分享~~

方法介绍完了,那么我的问题是:包括原文章作者实现在内的5种方法,在改变视频宽度时,哪种渲染效率更高?