视频框选进行局部进行放大

最新推荐文章于 2024-03-25 10:30:58 发布
最新推荐文章于 2024-03-25 10:30:58 发布
阅读量873 收藏 7
点赞数 29
文章标签： 音视频 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcj_zx/article/details/136901104
版权

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

  </head>

  <style>

    .video-info {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

    }

    #selectVideo {

    /* border: 2px solid #000000; */

    box-sizing: border-box;

    /* background: rgba(80, 80, 80); */

    display: block;

    width: 50%;

    height: 0;

    padding-top: 28%;

    position: relative;

    overflow: hidden;

    }

    #moveSelected {

      position: absolute;

      border: 1px dashed #d9d9d9;

      left: 0px;

      top: 0px;

      width: 0px;

      height: 0px;

      background-color: blue;

      opacity: 0.3;

      visibility: hidden;

      z-index: 100;

    }

    .reduction {

      width: 10%;

      background: #4e89ff73;

      color: #fff;

      position: absolute;

      right: 0;

      top: 0;

      text-align: center;

      cursor: pointer;

    }

  </style>

  <body>

    <!-- 视频 -->

    <div id="selectVideo">

      <video

        id="video"

        autoplay

        preload

        controls

        class="video-info"

        src="https://joylearning.bmw.com.cn/video/0906133651e0aa7569c8ced509d9b42e8bed52a4b4.mp4"

      ></video>

      <!-- 选中框选 -->

      <div id="moveSelected"></div>

      <div

        class="reduction"

        οnclick="rest()">

        还原

      </div>

    </div>

    <script>

      let obj = {

        id: "A",

        // 视频or放大后的视频

        amplify: {

          videoZoomFlag: false, //是否展示放大后的视频

          // 视频播放窗口起始点位置

          top: 0,

          left: 0,

          // 记录鼠标按下时的坐标

          downX: 0,

          downY: 0,

          // 记录鼠标抬起时候的坐标

          mouseX2: 0,

          mouseY2: 0,

          //拖拽选择框DOM元素

          rect: null, // 拖拽选择框节点rectArea

          // 是否需要(允许)处理鼠标的移动事件,默认识不处理

          select: false,

          // 监控局部放大请求数据

          rectInfo: {

            videoWidth: 0, //播放界面的宽

            videoHeight: 0,

            rectWidth: 0, //选择框的宽

            rectHeight: 0,

            rectCenterOffsetX: 0, //选择框中心坐标

            rectCenterOffsetY: 0,

          },

          showControl: true, // 是否显示控制条：拖拽选区时不显示

          bigVideoBig: false, //当前是否为放大视频

        },

      };

      let selectVideo = document.getElementById("selectVideo"); //最外层

      let video = document.getElementById("video"); //视频标签

      let moveSelected = document.getElementById("moveSelected"); // 选中阴影

      console.dir(selectVideo);

      /**

       * @description: 重置选择框

       * @return {*}

       */

      const resetRect = async () => {

        // 移除监听事件

        let {amplify} = obj

        document._params.amplify = amplify;

        document._params.video = video;

        document.removeEventListener("mouseup", up);

        // 重置相关数据

        amplify.rect.style.visibility = "hidden";

        amplify.rect.style.width = "0px";

        amplify.rect.style.height = "0px";

        amplify.top = 0;

        amplify.left = 0;

        amplify.downX = 0;

        amplify.downY = 0;

        amplify.mouseX2 = 0;

        amplify.mouseY2 = 0;

        amplify.rect = null;

        amplify.select = false;

        amplify.rectInfo = {

          videoWidth: 0,

          videoHeight: 0,

          rectWidth: 0,

          rectHeight: 0,

          rectCenterOffsetX: 0,

          rectCenterOffsetY: 0,

        };

        amplify.showControl = true;

      };

      /**

       * @description: 还原视频初始大小

       * @param {*} amplify 对应的amplify对象

       * @param {*} videoZoom 对应的id名称 videoMonitor_A

       * @return {*}

       */

      const rest = () => {

        let { amplify } = obj;

        amplify.videoZoomFlag = false;

        amplify.bigVideoBig = false;

        // 还原视频原始大小

        video.style.width = "100%";

        video.style.height = "100%";

        video.style.top = 0;

        video.style.left = 0;

        // video.play();

      };

      // 放大

      const handleVideo = async () => {

        let {amplify} = obj

        // 视频放大显示

        if (

          amplify.rectInfo.videoWidth / amplify.rectInfo.rectWidth <= 10 &&

          amplify.videoZoomFlag

        ) {

          // let videoZoomEle = document.getElementById(videoZoom);

          // 放大倍数

          let times = amplify.rectInfo.videoWidth / amplify.rectInfo.rectWidth;

          /* 1、当前视频为放大后视频 */

          if (amplify.bigVideoBig) {

            // 视频放大后大小

            video.style.width =

              (

                ((video.offsetWidth * times) / amplify.rectInfo.videoWidth) *

                100

              ).toFixed(2) + "%";

            video.style.height =

              (

                ((video.offsetHeight * times) / amplify.rectInfo.videoHeight) *

                100

              ).toFixed(2) + "%";

            // 移动放大后视频使框选区域显示在原播放窗口

            video.style.top =

              (

                ((((video.style.top.split("%")[0] / 100) *

                  amplify.rectInfo.videoHeight -

                  (amplify.rectInfo.rectCenterOffsetY -

                    amplify.rectInfo.rectHeight / 2)) *

                  times) /

                  amplify.rectInfo.videoHeight) *

                100

              ).toFixed(2) + "%";

            video.style.left =

              (

                ((((video.style.left.split("%")[0] / 100) *

                  amplify.rectInfo.videoWidth -

                  (amplify.rectInfo.rectCenterOffsetX -

                    amplify.rectInfo.rectWidth / 2)) *

                  times) /

                  amplify.rectInfo.videoWidth) *

                100

              ).toFixed(2) + "%";

          } else {

            /* 2、当前视频为正常大小视频 */

            amplify.bigVideoBig = true;

            // 放大后视频大小

            video.style.width = 100 * times + "%";

            video.style.height = 100 * times + "%";

            // 移动放大后视频使框选区域显示在原播放窗口

            video.style.top =

              (

                ((-(

                  amplify.rectInfo.rectCenterOffsetY -

                  amplify.rectInfo.rectHeight / 2

                ) *

                  times) /

                  amplify.rectInfo.videoHeight) *

                100

              ).toFixed(2) + "%";

            video.style.left =

              -(

                (((amplify.rectInfo.rectCenterOffsetX -

                  amplify.rectInfo.rectWidth / 2) *

                  times) /

                  amplify.rectInfo.videoWidth) *

                100

              ).toFixed(2) + "%";

          }

        } else {

          // 显示默认视频大小

          rest();

        }

      };

      // 鼠标按下

      selectVideo.addEventListener("mousedown", (event) => {

        console.log(event, "鼠标按下");

        video.pause();

        let { amplify } = obj;

        amplify.showControl = false; // 暂时不显示控制条

        // 获取鼠标按下时的坐标位置

        amplify.downX = event.clientX; //鼠标相对于浏览器有效区域x轴的位置

        amplify.downY = event.clientY;

        // 鼠标按下时才允许处理鼠标的移动事件

        amplify.select = true;

        // internalInstance.refs[rectArea][0]：获取“rectArea”节点

        amplify.rect = moveSelected;

        // 播放器窗口离浏览器窗口顶部距离

        amplify.top = selectVideo.getBoundingClientRect().top;

        // 播放器窗口离浏览器窗口左侧距离

        amplify.left = selectVideo.getBoundingClientRect().left;

        // 获取播放器窗口大小

        amplify.rectInfo.videoHeight = selectVideo.offsetHeight;

        amplify.rectInfo.videoWidth = selectVideo.offsetWidth;

        // 添加鼠标抬起事件

        document._params = { amplify, video }; // 传递监听事件所需参数

        document.addEventListener("mouseup", up);

        //   event.preventDefault();  // 阻止默认行为， 不能阻止， 阻止后就不能清空数据了

        event.stopPropagation(); // 阻止事件冒泡

      });

      // 鼠标移动

      selectVideo.addEventListener("mousemove", (e) => {

        // console.log(event, "鼠标移动");

        let { amplify } = obj;

        if (amplify.select) {

          // 获取鼠标移动时的坐标位置

          amplify.mouseX2 = e.clientX; //鼠标相对于浏览器有效区域x轴的位置

          amplify.mouseY2 = e.clientY;

          // A(左上) part

          if (

            amplify.mouseX2 < amplify.downX &&

            amplify.mouseY2 < amplify.downY

          ) {

            amplify.rect.style.left = amplify.mouseX2 - amplify.left + "px";

            amplify.rect.style.top = amplify.mouseY2 - amplify.top + "px";

            amplify.videoZoomFlag = false;

          }

          // B(右上) part

          if (

            amplify.mouseX2 > amplify.downX &&

            amplify.mouseY2 < amplify.downY

          ) {

            amplify.rect.style.left = amplify.downX - amplify.left + "px";

            amplify.rect.style.top = amplify.mouseY2 - amplify.top + "px";

            amplify.videoZoomFlag = false;

          }

          // C(左下) part

          if (

            amplify.mouseX2 < amplify.downX &&

            amplify.mouseY2 > amplify.downY

          ) {

            amplify.rect.style.left = amplify.mouseX2 - amplify.left + "px";

            amplify.rect.style.top = amplify.downY - amplify.top + "px";

            amplify.videoZoomFlag = false;

          }

          // D(右下) part

          if (

            amplify.mouseX2 > amplify.downX &&

            amplify.mouseY2 > amplify.downY

          ) {

            amplify.rect.style.left = amplify.downX - amplify.left + "px";

            amplify.rect.style.top = amplify.downY - amplify.top + "px";

            amplify.videoZoomFlag = true;

          }

          // 选择框大小

          amplify.rect.style.width =

            Math.abs(amplify.mouseX2 - amplify.downX) + "px";

          amplify.rect.style.height =

            Math.abs(amplify.mouseY2 - amplify.downY) + "px";

          // 选择框显示

          amplify.rect.style.visibility = "visible";

        }

        e.preventDefault(); // 阻止默认行为

        e.stopPropagation(); // 阻止事件冒泡

      });

      // 鼠标松开

      /**

       * @description: 鼠标抬起

       * @param {*} amplify 对应的amplify对象

       * @param {*} video 对应的id名称 videoMonitor_A

       * @return {*}

       */

      const up = async (e) => {

        // 获取监听事件传递的参数

        let { amplify, video } = document._params;

        amplify.showControl = true; // 选区完成后，显示控制条

        //鼠标抬起后不允许处理鼠标移动事件

        amplify.select = false;

        if (amplify.rect.style.visibility !== "hidden") {

          //获取选择框大小

          amplify.rectInfo.rectWidth = Math.abs(

            amplify.mouseX2 - amplify.downX

          );

          amplify.rectInfo.rectHeight = Math.abs(

            amplify.mouseY2 - amplify.downY

          );

          //获取选择框中心坐标

          amplify.rectInfo.rectCenterOffsetX =

            parseInt(amplify.rect.style.left) + amplify.rectInfo.rectWidth / 2;

          amplify.rectInfo.rectCenterOffsetY =

            parseInt(amplify.rect.style.top) + amplify.rectInfo.rectHeight / 2;

          //框选区域大小按视频播放窗口宽高比转换使框选部分放大后显示不失真：保持按播放宽高等比变化

          let rectRate =

            amplify.rectInfo.rectWidth / amplify.rectInfo.rectHeight;

          let videoRate =

            amplify.rectInfo.videoWidth / amplify.rectInfo.videoHeight;

          // 情况一：框选宽高比小于播放窗口宽高比：使用播放窗口比率统一框选宽度

          if (rectRate < videoRate) {

            amplify.rectInfo.rectWidth =

              amplify.rectInfo.rectHeight * videoRate;

            // 框选部分在播放窗口左侧边缘的情况

            if (

              amplify.rectInfo.rectCenterOffsetX <

              amplify.rectInfo.rectWidth / 2

            ) {

              amplify.rectInfo.rectCenterOffsetX =

                amplify.rectInfo.rectWidth / 2;

            }

            // 框选部分在播放窗口右侧边缘的情况

            if (

              amplify.rectInfo.rectCenterOffsetX +

                amplify.rectInfo.rectWidth / 2 >

              amplify.rectInfo.videoWidth

            ) {

              amplify.rectInfo.rectCenterOffsetX =

                amplify.rectInfo.videoWidth - amplify.rectInfo.rectWidth / 2;

            }

            // 情况二：框选宽高比大于等于播放窗口宽高比：使用播放窗口比率统一框选高度

          } else {

            amplify.rectInfo.rectHeight =

              amplify.rectInfo.rectWidth / videoRate;

            // 处理框选部分在播放窗口顶部边

            if (

              amplify.rectInfo.rectCenterOffsetY <

              amplify.rectInfo.rectHeight / 2

            ) {

              amplify.rectInfo.rectCenterOffsetY =

                amplify.rectInfo.rectHeight / 2;

            }

            // 处理框选部分在播放窗口底部边

            if (

              amplify.rectInfo.rectCenterOffsetY +

                amplify.rectInfo.rectHeight / 2 >

              amplify.rectInfo.videoHeight

            ) {

              amplify.rectInfo.rectCenterOffsetY =

                amplify.rectInfo.videoHeight - amplify.rectInfo.rectHeight / 2;

            }

          }

          //  处理视频

          handleVideo();

        }

        //重置选择框

        resetRect();

        e.preventDefault(); // 阻止默认行为

        e.stopPropagation(); // 阻止事件冒泡

      };

      //   鼠标离开拖拽选择区域

      selectVideo.addEventListener("mouseleave", (event) => {

        flag = false;

        moveSelected.style.width = 0;

        moveSelected.style.height = 0;

        moveSelected.style.top = 0;

        moveSelected.style.left = 0;

        event.preventDefault(); // 阻止默认行为

        event.stopPropagation(); // 阻止事件冒泡

      });














 

     

    </script>

   

  </body>

</html>

胡子大叔-lcj
关注
JS视频实现放大，缩小事件
m0_74359467的博客
09-25 820
希望对大家有帮助哦~
video标签点击视频全屏播放
热门推荐
半半的博客
07-21 1万+
早上一来有一个小需求，业务部需要点击表格里面的视频就可以全屏播放，然后我就去看了需求页面 video标签不是有一个控件可以全屏播放吗，为啥还要点击视频元素，别问，打工人服从安排 因为我是用vue框架自己封装的table组件，所以直接在table里面修改 因为在video标签上绑定click事件无用，就在下面加了一个空div，使用position定位到video元素上，然后把click事件绑定到这个div上，然后把当前元素的唯一id传到这个函数里 requestFullscreen(...
关于video标签的使用心得
qq_36877078的博客
04-18 1960
视频video标签的使用心得
video标签如何实现点击按钮视频回放、全屏播放功能
juju的博客
03-12 3084
回放 重置下currentTime属性 document.getElementById('videoID').currentTime=0 全屏播放 比如要控制视频全屏播放，页面上有个按钮： html <button id="fullScr">全屏播放</button> <video src="xxx.mp4" id="movie"></video> js var btnFullScr = document.getElementById('fullScr'
web端实现视频局部放大功能
weixin_43415075的博客
06-29 3665
PC端视频框选放大功能实现前言一、实现逻辑二、代码实现二、实现效果总结 前言 近期项目遇到一个需求：视频局部放大功能。具体来讲需要实现监控视频画面向右下方拉框松开后该区域放大显示，且可在已放大视频画面上继续拉框放大，向其他方向拉框松开后视频还原。从刚开始毫无思路到功能的完美实现着实花了不少功夫，接下来笔者将自己的实现过程分享如下： 提示：以下是本篇文章正文内容，下面案例可供参考 一、实现逻辑 播放器画面框选部分区域----》记录框选区域大小及位置----》计算放大倍数----》移动放大后视频使框选部分在
【vue3】js + css 实现 视频框选放大：局部细节放大、放大镜效果
m0_65041204的博客
12-05 1984
js、css实现鼠标框选区域放大显示。按住鼠标左键不放，向右拖动，框选出需要放大的区域后，放开鼠标左键，实现放大视频画面局部细节的功能
video.js自定义预览组件-旋转、下载、画中画、放大缩小功能
最新发布
weixin_42418774的博客
03-25 1374
提醒自己：这是有段时间之前的代码逻辑了，或许明天的你就有不一样的想法呢！后面如果接触到新需求有优化会持续更新哒。
HTML5 video播放器全屏(fullScreen)方法实例
09-28
主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下
视频框选放大功能demo
12-05
一、功能说明 实现鼠标框选区域放大显示。 二、需求描述 1. 按住鼠标左键不放，向右侧拖动，框选出需要放大的区域后，松开鼠标，实现框选区域放大显示。 2. 按住鼠标左键不放，向左侧拖动，框选出随意大小的区域后，松开鼠标，实现视图显示大小还原。 三、实现逻辑 1. 记录框选出的需要放大的区域的位置（坐标）和大小（尺寸）。 2. 将框选大小与原画面大小对比，计算放大倍数。 3. 计算放大后画面需要平移的数据，使其画面中心点位于原画面展示中心。 4. 还原功能，即还原画面原始大小。 四、其他说明 本资源文件为“使用html实现单视频放大框选画面功能”的示例文件，多视频或vue3实现方法及效果视频，可以参考博文：【vue3】视频局部放大 https://blog.csdn.net/m0_65041204/article/details/134777900?spm=1001.2014.3001.5502 五、实现效果 视频展示见链接：https://live.csdn.net/v/349137
Cesium选择地图范围【 绘制矩形 坐标转换 局部放大】
m0_71102594的博客
05-25 795
var activeShapePoi 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 nts = []; var activeShape; var floatingPoint; //查看器 var viewer = new Cesium.Viewer(‘cesiumContainer’, { selectionIndicator: false, infoBox: false, // 注释时相当于使用默认地形，解开注释相当于使用全球地形
用c++实现以下功能：1.只能对全屏画面的视频进行画面放大、缩小操作，不能对宫格中的画面进行放大和缩小操作。点击工具栏中的电子放大按钮，选择播放画面中的一块矩形区域进行局部放大或者缩小。2.具体实现通过鼠标从左上角往右下角移动进行局部放大，右下角往左上角移动进行缩小的逻辑
07-11
以下是使用C++实现的代码示例，实现了对全屏画面的视频进行局部放大和缩小操作： ```cpp #include #include using namespace std; using namespace cv; // 全局变量 bool isMouseDown = false; // 标记鼠标是否...
CSS 自定义多选框样式
wsc2111的博客
06-08 3283
今天看了一个做 Todo List 的视频，学了一招，可以自定义多选框的样式，只用 CSS 就可以做到。 起步 先写一些关于表单最基础的 HTML 和 CSS。 下面的 HTML 表单允许你选择多个颜色： <form> <fieldset> <legend>Choose Your Color</legend> <ul> <li> <input type="checkbox" nam
FFmpeg进阶:视频滤镜大全
yang1fei2的博客
11-19 4226
在做视频特效的时候，很多特效其实不用自己写，FFmpeg的视频滤镜里面提供了很丰富的滤镜特效。这里翻译了一下FFmpeg官方文档的所有视频滤镜的介绍，供大家参考。由于很多地方概念比较生疏，翻译的可能不恰当，欢迎反馈修改意见。
html5实现视频（放大缩小播放暂停）
xkweiguang的博客
07-26 1万+
效果如下图： <!DOCTYPE html> <html> <body> <meta charset="utf-8"> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onc
视频播放：vue使用vue-video-player插件
provence_20的博客
12-09 2112
1.安装插件 npm install vue-video-player -S 2.使用（我的是弹窗） <template> <el-dialog :title="'视频播放'" :close-on-click-modal="false" :visible.sync="visible"> <el-form:...
原生js 视频放大镜 （等同于图片放大镜）
weixin_42448623的博客
08-30 898
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
webView video标签视频点击全屏播放
WJC-keepGoing的博客
06-29 1086
最近真的是饱受webView的折磨啊，最近刚做了一个webview视屏点击放大全屏播放的功能，这里记录一下 页面xml文件的代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
HTML如何对视频缩放,vue接入实时视频，并可以控制缩放与上下左右
weixin_36201981的博客
06-25 2152
效果图：1、在大屏上的效果：页面嵌入实时视频，可通过点击下面的按钮实现，摄像头拉进，缩小，上下左右等旋转动作image.png2、双击视频时候全屏的放大效果：image.png步骤：一、在要嵌入监控的vue页面中，用iframe引入：image.pngvedio的目录结构：整个demo文件都要导入项目中，可以看到在ysyDemo下面还有几个js文件和一些样式，我们需要修改的就是，在vedio里面接...
视频直播源码，视频窗口选中放大效果的实现
云豹网络科技
06-17 406
视频直播源码，视频窗口选中放大效果的实现的相关代码 视频直播源码，视频模块的布局是这样的： <RelativeLayout android:id="@+id/first_view_rl" android:layout_width="510dp" android:layout_height="291dp" android:layout_marginLeft="@dimen/smart_hospital_home_marginLeft" android:layout
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值