前言

近期項目遇到一個需求：視頻局部放大功能。具體來講需要實現(xiàn)監(jiān)控視頻畫面向右下方拉框松開后該區(qū)域放大顯示，且可在已放大視頻畫面上繼續(xù)拉框放大，向其他方向拉框松開后視頻還原。從剛開始毫無思路到功能的完美實現(xiàn)著實花了不少功夫，接下來筆者將自己的實現(xiàn)過程分享如下：

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、實現(xiàn)邏輯

播放器畫面框選部分區(qū)域----》記錄框選區(qū)域大小及位置----》計算放大倍數(shù)----》移動放大后視頻使框選部分在播放器窗口區(qū)域顯示----》還原播放器畫面

二、代碼實現(xiàn)

詳細代碼實現(xiàn)如下如下(示例)：

v-show="videoShow"

:videoUrl="videoUrl"

live

/>

v-show="videoZoomShow"

:videoUrl="videoUrl"

live

/>

三、實現(xiàn)效果