前言
近期項目遇到一個需求:視頻局部放大功能。具體來講需要實現(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)效果