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

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

html

<div :id="getPtzBlockId(index)" class="ptz-block">
		<div title="上" class="ptz-cell ptz-up up ptz"><i @mousedown="ptzcontrol(index,'up')" @mouseup="stopcontrol(index,'up')" class="fa fa-chevron-up"></i></div>
		<div title="左" class="ptz-cell ptz-left left ptz"><i @mousedown="ptzcontrol(index,'left')" @mouseup="stopcontrol(index,'left')" class="fa fa-chevron-left"></i></div>
		<div title="云台控制" class="ptz-center"><i class="fa fa-arrows"></i></div>
		<div title="右" class="ptz-cell ptz-right right ptz"><i @mousedown="ptzcontrol(index,'right')" @mouseup="stopcontrol(index,'right')" class="fa fa-chevron-right"></i></div>
		<div title="下" class="ptz-cell ptz-down down ptz"><i @mousedown="ptzcontrol(index,'down')" @mouseup="stopcontrol(index,'down')" class="fa fa-chevron-down"></i></div>
		<div title="缩" class="ptz-cell ptz-plus zoomin focusing"><i @mousedown="ptzcontrol(index,'zoomin')" @mouseup="stopcontrol(index,'zoomin')" class="fa fa-plus-circle"></i></div>
		<div title="放" class="ptz-cell ptz-minus zoomout focusing"><i @mousedown="ptzcontrol(index,'zoomout')" @mouseup="stopcontrol(index,'zoomout')" class="fa fa-minus-circle"></i></div>
</div>

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

效果