前段时间看到一个有意思的视频展示效果，简而言之就是左右两个视频总是显示各自中间的部分。文章作者通过 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种方法，在改变视频宽度时，哪种渲染效率更高？