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

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

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);
}

效果