当前位置:首页 > 技术学院 > 技术前线
[导读]web端实现视频框选放大功能

前言

近期项目遇到一个需求:视频局部放大功能。具体来讲需要实现监控视频画面向右下方拉框松开后该区域放大显示,且可在已放大视频画面上继续拉框放大,向其他方向拉框松开后视频还原。从刚开始毫无思路到功能的完美实现着实花了不少功夫,接下来笔者将自己的实现过程分享如下:

提示:以下是本篇文章正文内容,下面案例可供参考

一、实现逻辑

播放器画面框选部分区域----》记录框选区域大小及位置----》计算放大倍数----》移动放大后视频使框选部分在播放器窗口区域显示----》还原播放器画面

二、代码实现

详细代码实现如下如下(示例):

v-show="videoShow"

:videoUrl="videoUrl"

live

/>

v-show="videoZoomShow"

:videoUrl="videoUrl"

live

/>

三、实现效果


视频放大怎么弄


视频放大怎么弄
本站声明: 本文章由作者或相关机构授权发布,目的在于传递更多信息,并不代表本站赞同其观点,本站亦不保证或承诺内容真实性等。需要转载请联系该专栏作者,如若文章内容侵犯您的权益,请及时联系本站删除( 邮箱:macysun@21ic.com )。
换一批
延伸阅读
关闭