视频放大怎么弄
扫描二维码
随时随地手机看文章
前言
近期项目遇到一个需求:视频局部放大功能。具体来讲需要实现监控视频画面向右下方拉框松开后该区域放大显示,且可在已放大视频画面上继续拉框放大,向其他方向拉框松开后视频还原。从刚开始毫无思路到功能的完美实现着实花了不少功夫,接下来笔者将自己的实现过程分享如下:
提示:以下是本篇文章正文内容,下面案例可供参考
一、实现逻辑
播放器画面框选部分区域----》记录框选区域大小及位置----》计算放大倍数----》移动放大后视频使框选部分在播放器窗口区域显示----》还原播放器画面
二、代码实现
详细代码实现如下如下(示例):
v-show="videoShow"
:videoUrl="videoUrl"
live
/>
v-show="videoZoomShow"
:videoUrl="videoUrl"
live
/>
三、实现效果