使用vue视频播放器上增加云台控制面板

青旅半醒 2021-11-23 11:24 483阅读 0赞

费了半天劲，终于有效果了。赶紧记录下

## html ##

## css ##

/**播放器云台控制面板**/
    .ptz-block {
    	position: absolute;
    	z-index: 99999;
    	height: 220px;
    	width: 150px;
    	right: 20px;
    	margin-top: 1%;
    	text-align: center;
    	font-size: 24px;
    	background: hsla(0, 0%, 93%, .6);
    	border-radius: 16px;
    	overflow: hidden;
    	display: none;
    }
    
    /**标准控制面板**/
    .ptz-block .ptz-cell{
    	line-height: 50px;
    	height: 50px;
    	width: 50px;
    	position: absolute;
    	cursor: pointer;
    }
    
    .ptz-block .ptz-up{
    	top: 70px;
    	left: 50px;
    }
    
    .ptz-block .ptz-left{
    	top: 120px;
    	left: 0;
    }
    
    .ptz-block .ptz-center{
    	top: 120px;
    	left: 50px;
    	width: 50px;
    	height: 50px;
    	line-height: 50px;
    	position: absolute;
    	border-radius: 25px;
    	background: hsla(0, 0%, 80%, .2);
    	/* cursor: move; */
    }
    
    .ptz-block .ptz-right{
    	top: 120px;
    	left: 100px;
    }
    
    .ptz-block .ptz-down{
    	top: 165px;
    	left: 50px;
    }
    
    .ptz-block .ptz-plus{
    	top: 25px;
    	left: 5px;
    }
    
    .ptz-block .ptz-minus{
    	top: 25px;
    	right: 5px;
    }

## js ##

ptzcontrol:function(index,cmd){//鼠标点击控制
    			var id = this.getPtzBlockId(index);
    			var c=$("#"+id+" ."+cmd).css("cursor"); 
    			if(c != "default"){
    				$("#"+id+" ."+cmd).css('color','red');
    				control(index,cmd);
    			}
    		},
    		stopcontrol:function(index,cmd){//鼠标松开停止控制
    			var id = this.getPtzBlockId(index);
    			var c=$("#"+id+" ."+cmd).css("cursor"); 
    			if(c != "default"){
    				$("#"+id+" ."+cmd).css('color','#000000');
    				control(index,"stop");
    			}
    		}
    
    //控制动作
    function control(index,cmd){
    	var c_data = vm.items[index].data;
    	var ptzParam = {
    		channel:c_data.sub_channel,
    		command:cmd,
    		speed:5//速度
    	};
    	Video.ptz.control (c_data.nvr_id,ptzParam);
    }

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: /images/20211122/5371a04e0a944a6da06c80c2a924e386.png