原生js 视频放大镜 （等同于图片放大镜）

最新推荐文章于 2024-03-21 10:30:44 发布
最新推荐文章于 2024-03-21 10:30:44 发布
阅读量870 收藏 1
点赞数
分类专栏： JavaScript HTML/HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/100150414
版权

注意：记得打开flash 打开flash方法

<!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-UA-Compatible" content="ie=edge">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.3.0/video.min.js"></script>
    <title>视频放大镜</title>
    <style>
        html,body{
            padding: 0;
            margin: 0;
        }
        .con{
            position: relative;
            width: 400px;
            height: 300px;
            background-color:aquamarine;
            overflow: hidden;
        }
        .mover{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 75px;
            border:1px solid red;
            cursor: pointer;
            background-color: rgba(255,255,255,.2)
        }
        .adddel{
            position: absolute;
            left: 0;
            bottom: 0px;
            display: flex;
            justify-content:space-between;
            width: 100%;
        }
        .adddel div{
            cursor: pointer;
            margin: 4px 10px;
        }
        .conshow{
            margin-top: 10px;
            display: none;
            position: relative;
            width: 400px;
            height: 300px;
            overflow: hidden;
            background-color: aquamarine
        }
        .videocon{
            position: absolute;
            top: 0;
            left: 0;
            background-color: red
        }
    </style>
</head>
<body>
    <div class="con">
        <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" style="width: 100%;height:100%"
            poster="http://vjs.zencdn.net/v/oceans.png">
            <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/flv">
        </video>
        <div class="mover">
            <div class="adddel">
                <div class="add">add</div>
                <div class="reduce">reduce</div>
            </div>
        </div>
        
    </div>
    
    <div class="conshow"><div class="videocon"></div></div>

    <script>
        var player = videojs('example_video_1',{})
        player.play();
        var _videoStr = `<video id="example_video_2" class="video-js vjs-default-skin"  preload="none" 
                        style="width:100%;height:100%;"
                        poster="http://vjs.zencdn.net/v/oceans.png">
                        <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/flv">
                        </video>`
        var con = document.querySelector('.con');
        var mover = document.querySelector('.mover');
        var conshow = document.querySelector('.conshow');
        var videocon = document.querySelector('.videocon');
        var add = document.querySelector('.add');
        var reduce = document.querySelector('.reduce');

        // 倍率  con/mover
        var w_dynameter,h_dynameter;

        add.onclick = function(){
            var _movW = mover.offsetWidth-2;
            var _movH = mover.offsetHeight-2;
            var _wh = _movW/_movH;
            console.log(_movH*_wh)
            mover.style.width = _movW + 10*_wh +2 +'px';
            mover.style.height = _movH + 10 +2 +'px';
        }
        reduce.onclick = function(){
            var _movW = mover.offsetWidth-2;
            var _movH = mover.offsetHeight-2;
            var _wh = _movW/_movH;

            mover.style.width = _movW - 10*_wh +2 +'px';
            mover.style.height = _movH - 10 +2 +'px';
        }
        
        var player2;
        con.onmouseover = function(){
            mover.style.display = 'block'
            w_dynameter = con.offsetWidth/(mover.offsetWidth-2)//去掉边框
            h_dynameter = con.offsetHeight/(mover.offsetHeight-2)  
        }
        con.onmouseout = function(){
            mover.style.display = 'none'
        }
        moverCon()
        function moverCon(){ //mover在con拖动
            var _move = false;
            var _x,_y,_top,_left;
            mover.onmousehover = function(){
                conshow.style.display = 'none'
            }
            mover.onmousedown = function(down){
                _move = true;
                mover.style.cursor = 'move';
                _x = down.clientX;
                _y = down.clientY;
                _top = mover.offsetTop;
                _left = mover.offsetLeft;
               
            }
            mover.onmousemove = function(move){           
                if(_move){
                    var mov_top = move.clientY - _y + _top;
                    var mov_left = move.clientX - _x + _left
                    if(mov_top <=0){
                        mov_top = 0
                    }
                    var _htop = con.offsetHeight-mover.offsetHeight
                    if(mov_top >= _htop){
                        mov_top = _htop
                    }
                    if(mov_left <=0){
                        mov_left = 0
                    }
                    var _wleft = con.offsetWidth-mover.offsetWidth
                    if(mov_left >=_wleft){
                        mov_left = _wleft
                    }
                    mover.style.top = mov_top +'px';
                    mover.style.left = mov_left +'px';

                    // var _video2 = document.querySelector('#example_video_2');
                    videocon.style.top = -mov_top*h_dynameter+'px';
                    videocon.style.left = -mov_left*w_dynameter+'px';
                }
            }
            mover.onmouseup = function(up){
                _move = false;
                mover.style.cursor = 'auto';
                _top = up.offsetTop;
                _left = up.offsetLeft;
            }
            mover.onmouseover = function(over){
                conshow.style.display = 'block' 
                var _conshowW = conshow.clientWidth;
                var _conshowH = conshow.clientHeight;             
                videocon.innerHTML = _videoStr;
                player2 = videojs('example_video_2',{})
                player2.play();
                videocon.style.width = _conshowW*w_dynameter +'px';
                videocon.style.height = _conshowH*h_dynameter +'px';

                console.log(videocon,w_dynameter,h_dynameter)
                console.log("w",_conshowW*w_dynameter,"h",_conshowH*h_dynameter)
                _move = false;
                mover.style.cursor = 'auto';
                _top = over.offsetTop;
                _left = over.offsetLeft;
            }
            mover.onmouseout = function(over){
                player2.dispose()
                videocon.innerHTML = '';
                conshow.style.display = 'none'

            }
        }
        
        // conshowvideo()

        function createvideo(){

        }
        
    </script>
</body>
</html>

效果图
在这里插入图片描述
bug 2个视频不同步 如果有更好的方法 请大神指教

tianmeng1999
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html，js实现时间轴，可播放视频，点击放大图片
08-12
用html，js实现时间轴，页面可以随鼠标滚动，可播放视频，点击放大图片
js css如何按比例放大视频或者图片
yangruini_love的博客
09-16 1597
因需求需要做个鼠标移动则视频放大，图片放大的功能(不能贴原代码这里就讲述一下思路和重点代码段吧)，主要用到的就是一个属性，直接增加一个css的属性如下： transform:scaleX(倍数)scaleY(倍数); 倍数可以是小数自己可以根据需求调整但是写1的话是一样大的 如果是放大镜那种效果大概实现思路就是： 1.获取到原有视频或者图片的高度和宽度 var width = $("div").css("width"); var height = $("div").css("height");..
JS视频实现放大，缩小事件
m0_74359467的博客
09-25 726
希望对大家有帮助哦~
用js实现对图片的局部放大
漂泊小柒的专栏
07-23 6066
Magnifier /* 原始图片所在的div*/ #magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } /*原始图片*/ #img{ width:342px; height:
JS实现局部放大(放大镜)效果
02-25
这是无意思遇到收集的，用JS做的对图片局部放大的效果 就像放大镜一样的效果
原生js实现放大镜效果
10-20
本文主要分享了原生js封装实现放大镜效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
原生js实现图片放大镜效果
03-30
以上就是使用原生JavaScript实现图片放大镜效果的基本步骤。你可以根据需求调整样式、动画效果等，以满足不同场景的应用。这种方法不仅适用于简单的图片放大，还可以扩展到其他交互式元素，如产品细节展示等。
原生javascript实现图片放大镜效果
10-20
主要为大家详细介绍了原生javascript实现图片放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现放大镜特效
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个放大镜特效，这种效果常用于电商网站的产品图片展示，让用户能更清晰地查看商品细节。首先，我们要理解放大镜特效的关键原理和涉及到的技术点。 **放大镜特效...
原生js实现放大镜
10-20
原生JS实现放大镜 /* ...CSS样式... */ <div class="inner"></div> // ...JavaScript代码... ``` 接下来，我们编写JavaScript代码来处理鼠标事件。当鼠标移入小图像时，放大镜视窗（`....
视频框选放大功能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
安卓微信中播放视频不自动全屏播放设置
陈德优的博客
04-10 5571
最新的设置安卓视频不全屏播放（不知道是否全部安卓机型都支持）的方法 如下设置HTML代码：&lt;video id="videoID" controls src="XXX" poster="XXX.jpg" preload="auto" x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="tr
js设置style_原生 JS 实现放大镜特效
weixin_39855186的博客
12-03 151
项目文件已上传码云：叁贰壹/JavaScript 放大镜特效 可直接访问页面查看效果： http://songothao.gitee.io/javascript_magnifier_effect/原生JS实现放大镜特效https://www.zhihu.com/video/1242496299595198465实现原理：将展示在页面上的图片进行设置宽高缩小，另外将大很多原图的原图进行隐藏，这个思路...
web端实现视频局部放大功能
weixin_43415075的博客
06-29 3339
PC端视频框选放大功能实现前言一、实现逻辑二、代码实现二、实现效果总结 前言 近期项目遇到一个需求：视频局部放大功能。具体来讲需要实现监控视频画面向右下方拉框松开后该区域放大显示，且可在已放大视频画面上继续拉框放大，向其他方向拉框松开后视频还原。从刚开始毫无思路到功能的完美实现着实花了不少功夫，接下来笔者将自己的实现过程分享如下： 提示：以下是本篇文章正文内容，下面案例可供参考 一、实现逻辑 播放器画面框选部分区域----》记录框选区域大小及位置----》计算放大倍数----》移动放大后视频使框选部分在
视频框选进行局部进行放大
最新发布
lcj_zx的博客
03-21 782
/ internalInstance.refs[rectArea][0]：获取“rectArea”节点。//框选区域大小按视频播放窗口宽高比转换使框选部分放大后显示不失真：保持按播放宽高等比变化。// 情况二：框选宽高比大于等于播放窗口宽高比：使用播放窗口比率统一框选高度。showControl: true, // 是否显示控制条：拖拽选区时不显示。// 暂时不显示控制条。// 情况一：框选宽高比小于播放窗口宽高比：使用播放窗口比率统一框选宽度。
VideoJS 网页直播实现双击全屏
热门推荐
11-05 1万+
最近接到客户需求, 要求我们的网页直播播放器更加符合广大人民群众的使用习惯,实现双击全屏的效果.目前网页直播播放器使用了开源的 VideoJS, 它的默认效果是单击播放区域暂停, 只能通过右下角的最大化按钮触发最大化. 要实现双击全屏播放的效果, 就要对 VideoJS 动点小手术, 下面介绍下其中两个关键的步骤.一. 禁用单击暂停google 得知已经有人提过这样的 issue, google 能
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
用原生js写个放大镜功能
03-22
好的，以下是一个简单的原生JS实现放大镜功能的代码： HTML： ``` <div class="container"> <img src="image.jpg" alt="product image" id="product-image"> <div class="magnifier"></div> </div> ``` CSS： ``` .container { position: relative; } .magnifier { position: absolute; width: 200px; height: 200px; border: 1px solid #ccc; display: none; pointer-events: none; background-repeat: no-repeat; background-size: 400px 400px; background-position: 0 0; } ``` JS： ``` const container = document.querySelector('.container'); const magnifier = document.querySelector('.magnifier'); const productImage = document.querySelector('#product-image'); container.addEventListener('mousemove', e => { const containerRect = container.getBoundingClientRect(); const x = e.clientX - containerRect.left; const y = e.clientY - containerRect.top; const magnifierSize = 200; const imageWidth = productImage.width; const imageHeight = productImage.height; const ratioX = imageWidth / containerRect.width; const ratioY = imageHeight / containerRect.height; const bgPosX = -x * ratioX + magnifierSize / 2; const bgPosY = -y * ratioY + magnifierSize / 2; magnifier.style.display = 'block'; magnifier.style.left = `${x - magnifierSize / 2}px`; magnifier.style.top = `${y - magnifierSize / 2}px`; magnifier.style.backgroundImage = `url(${productImage.src})`; magnifier.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`; }); container.addEventListener('mouseleave', () => { magnifier.style.display = 'none'; }); ``` 这段代码会在鼠标移动到图片上时，显示一个放大镜，并在放大镜内显示鼠标所在位置的图片放大后的部分。当鼠标移开图片时，放大镜会隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值