请问视频如何等比例放大?

Question

项目有个需求是拖动自定义的滚动条 放大或缩小视频 现在完全没有思路 求大佬指点一下!...

Answer 1

只是显示内容放大，其实有两种方案

1. 就是视频标签放大，并且设置视频展示是适配标签的，然后上面再有一个遮罩，隐藏一些遮挡的部分。
2. 用canvas来映射展示，这个可以控制视频内容在canvas中的映射比例，实现放大和缩小。这种方法更耗费资源。 其实用canvas来控制视频的呈现可以实现特别多的效果，包括放缩、局部替换、背景替换、色键处理等等。可以参考https://developer.mozilla.org... 和 https://zhuanlan.zhihu.com/p/...

Answer 2

外面一个div，overflow hidden,里面视频长宽控制大小，定位控制放大缩小的位置

Answer 3

其实你这个问题就是视频的放大缩小。只不过视频外部的盒子 overflow: hidden。

当然，你也可以使用 zoom 、 scale 之类来控制大小。但是我不推荐，因为这样的话等于小尺寸放大显示，基本就是马赛克。当然，你可以先放大一倍，然后 scale 缩小一倍，来对冲。