共计 1800 个字符，预计需要花费 5 分钟才能阅读完成。
一、前言
首先介绍下 Video Roll，这款浏览器插件目前曾经有超过1000+ 用户在应用，齐全开源，零差评。
那么咱们来介绍下这款小众插件到底是做什么的。
二、Video Roll 解决的问题
首先我整顿了一下 PC 平台的网络视频存在哪些问题:
1. 视频方向不对
大部分视频网站默认的比例是 16：9 的视频，按理说是横屏播放的，也就是宽占 16，高只占 9。然而咱们有时会看到上面这种视频：
这样的视频很显著应该是个竖屏视频，宽高比例正好相同，然而因为作者在上传视频时没有调整方向，所以就呈现了下面这种景象。于是乎弹幕就有很多人说脖子都歪疼了😂。当然也可能存在镜像翻转的问题，但镜像个别不太影响观看体验。横竖相同的状况是最影响观看体验的。
2. 视频拉伸
除了方向问题，某些视频还存在比例失衡的问题。也就是所谓的被适度拉伸，导致看上去视频内容变形。
3. 视频黑边
视频黑边通常是视频内容没齐全占满容器导致的，这种是否影响观看体验取决于视频的内容以及黑边大小。有些视频内容区域太小，黑边太大。
三、Video Roll 的解决方案
因为古代浏览器的视频根本都是基于 HTML5 的 <video> 标签来实现的，你所能见到的各大视频网站，例如 Youtube、Bilibili、Viemo、Tiktok 等等，无一例外。那么咱们就间接从 Video 标签上下手。
置信做过前端的同学应该都会想到，间接应用 CSS 的 transform 属性就能解决这些问题。没错，Video Roll 就是间接通过 transform 搞定的。Video Roll 通过 transform 中 3d 和 2d 两种变形成果同时存在的形式，同时加上一些简略的算法，实现了完满的解决方案。
1. 方向问题
方向间接通过 transform: rotate 就能搞定，在应用层面，用户只须要点一下即可。
尽管原理简略，然而存在一个问题，就是旋转后视频的大小还是没有发生变化，因为视频外有一层容器，那么视频必定就会被遮挡而无奈显示齐全，就像上面的成果。
所以咱们还须要应用 scale 属性来进行肯定的缩放，而这个缩放的数值就须要通过视频大小和容器大小来进行肯定的计算而失去。通过 videoWidth 和videoHeight以及 offsetWidth 和offsetHeight来进行宽高比例缩放的计算。通过计算后，最终的成果如下：
因为旋转缩放后，rotate和 scale 属性曾经被占用，这时如果咱们还须要镜像翻转怎么办呢？也只须要点一下即可。
实现层面则是再加上 rotate3d 或scale3d即可，这样他们将同时失效。
2. 拉伸问题
因为拉伸问题程序无奈主动判断，所以将交给用户本人设置，即通过 scaleX 和scaleY来解决，用户只须要拖拽即可。
3. 黑边问题
黑边问题实质上是视频的大小不对，同样通过 scale 即可解决。
4. 反复配置问题
最初 Video Roll 还思考到了如果用户第二次再关上雷同的视频，难道又要反复设置一次吗？当然不须要，咱们只须要保留对该视频的配置即可，当我下次关上雷同的视频时，便会主动失效。
四、总结
其实 Chrome 商城有一些相似的插件，这里举荐两个能用的：
- Video Rotater
- Video Transformer
Video Rotater 比 Video Roll 早公布，我也是在用了它之后，发现存在一些问题，决定本人写一个。
Video Transformer 则是比 Video Roll 晚公布，没有交互界面，以快捷键操作为主，绝对麻烦。
Video Roll 诞生的初衷只是为了不便我本人看某些视频时的体验，但笔者想到肯定会有很多人有雷同的问题，于是抉择了公布为浏览器插件，并且开源了进去。
五、欢送退出
因为公布后用户量始终在减少，当初周活用户曾经超过了 1K，Video Roll 可能会持续保持更新，提供更多优化视频体验的性能，心愿能做成一个All in one 的插件，当你在 PC 端看视频时，只须要这样一个插件即可满足大部分需要。也心愿有趣味的敌人能够和我一起来欠缺这个插件。
目前插件是基于 Typescript、Parcel 和Vue3构建的，UI 库是Vant。下一步心愿优化插件构建的工具链、提供第三方库和脚本、以及重构官网。
Github: https://github.com/VideoRoll/…
官网：https://gomi.site/VideoRoll
Chrome 商城：https://chrome.google.com/web…
