前端使用海康WEB播放器插件，播放摄像头监控视频

之前的文章中有过前端播放直播或者监控视频，用过两个播放器，一个是前面有教程的cyberplayer百度智能云提供的WEB播放器，实现了功能，后来又用了EasyPlayer播放器也实现了，为啥要换呢，因为百度的播放器不支持H265编码格式，只能播H264的，EasyPlayer官方说明支持H265编码。现在用的海康官方的WEB播放器插件，这个就不是播流了，传每个摄像头的IndexCode播放监控,

海康的插件下载地址https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10

先看下实现的效果：

跟之前的文章里的样子效果一样，就是下面的播放监控换成海康提供的插件，播放流畅了许多，也不卡顿了。也可全屏四宫格和放大单独一个，
引入必要JS文件，插件JS

<script src="./js/jsencrypt.min.js"></script>
<script src="./js/jsWebControl-1.0.0.min.js"></script>
<script src="./js/jquery.min.js"></script>

 <div id="playWnd" class="playWnd player"></div>//播放器容器

重点代码：

var oWebControl = null;// 插件对象
var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window);// 是否为IE浏览器
var pubKey = '';
var initCount = 0;
var ele = document.getElementById('playWnd');//父元素宽
var widtH = ele.offsetWidth;
var off = document.getElementById('setHeight');//爷元素高
var heighT = off.offsetHeight;
console.log(ele.offsetWidth)
console.log(off.offsetHeight)

function UpdateMultiPlayValue() {
	var sel = document.getElementById("isMultiPlay");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {
		document.getElementById("multiPlayWndIds").style.display = "";//显示
	} else {
		document.getElementById("multiPlayWndIds").style.display = "none";//隐藏
	}
}

function UpdateStopPlayValue() {
	var sel = document.getElementById("stopMode");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {
		document.getElementById("multiStopPlayWndIds").style.display = "";//显示
	} else {
		document.getElementById("multiStopPlayWndIds").style.display = "none";//隐藏
	}
}

function UpdateValue() {
	var sel = document.getElementById("isHttps");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (0 == v) {
		document.getElementById("port").value = 80;
	}
	else {
		document.getElementById("port").value = 443;
	}
}

function UpdatePlayTypeValue() {
	var sel = document.getElementById("PlayType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (2 == v) {
		//获取布局，并显示标签和窗口选择下拉框
		document.getElementById("PreviewWndId").style.display = "";//显示
		oWebControl.JS_RequestInterface({
			funcName: "getLayout"
		}).then(function (oData) {
			//分析窗口数
			//{"errorCode":0,"errorModule":0,"responseMsg":{"code":0,"data":"{\n    \"layout\": \"2x2\",\n    \"wndNum\": 4\n}\n"},"sequence":"93298475-03d0-49c9-bc3a-a94ec696f983","uuid":"{c76078b4-4f19-4198-b68d-83df1d3d71a9}"}

			//"{\n    \"layout\": \"2x2\",\n    \"wndNum\": 4\n}\n"
			var Data = JSON.stringify(oData.responseMsg.data);
			//"{    \"layout\": \"2x2\",    \"wndNum\": 4}"
			Data = Data.replace(/\\n/g, "");
			//"{    "layout": "2x2",    "wndNum": 4}"
			Data = Data.replace(/\\/g, "");
			//{    "layout": "2x2",    "wndNum": 4}"
			Data = Data.replace(/\"{/g, "{");
			//{    "layout": "2x2",    "wndNum": 4}"
			Data = Data.replace(/}\"/g, "}");
			var DataNum = JSON.parse(Data).wndNum;

			createSelectOption(DataNum);
		});
	}
	else {
		//隐藏标签和窗口选择下拉框
		document.getElementById("PreviewWndId").style.display = "none";//隐藏
	}
}

function createSelectOption(wndNum) {
	var _html = "";
	//先清空之后再添加
	$("#playWndId").empty();
	for (var _i = 0; _i < wndNum; _i++) {
		_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
	}
	$("#playWndId").append(_html);
}

function UpdateSnapTypeValue() {
	var sel = document.getElementById("SnapType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {
		//获取布局，并显示标签和窗口选择下拉框
		document.getElementById("SnapShotWndId").style.display = "";//显示
		oWebControl.JS_RequestInterface({
			funcName: "getLayout"
		}).then(function (oData) {
			//分析窗口数
			var Data = JSON.stringify(oData.responseMsg.data);
			Data = Data.replace(/\\n/g, "");
			Data = Data.replace(/\\/g, "");
			Data = Data.replace(/\"{/g, "{");
			Data = Data.replace(/}\"/g, "}");
			var DataNum = JSON.parse(Data).wndNum;

			createSnapSelectOption(DataNum);
		});
	}
	else {
		//隐藏标签和窗口选择下拉框
		document.getElementById("SnapShotWndId").style.display = "none";//隐藏
	}
}

function createSnapSelectOption(wndNum) {
	var _html = "";
	//先清空之后再添加
	$("#SnapWndId").empty();
	for (var _i = 0; _i < wndNum; _i++) {
		_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
	}
	$("#SnapWndId").append(_html);
}

function UpdateSetOSDTypeValue() {
	var sel = document.getElementById("SetOSDType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {
		//获取布局，并显示标签和窗口选择下拉框
		document.getElementById("SetOSDWndId").style.display = "";//显示
		oWebControl.JS_RequestInterface({
			funcName: "getLayout"
		}).then(function (oData) {
			//分析窗口数
			var Data = JSON.stringify(oData.responseMsg.data);
			Data = Data.replace(/\\n/g, "");
			Data = Data.replace(/\\/g, "");
			Data = Data.replace(/\"{/g, "{");
			Data = Data.replace(/}\"/g, "}");
			var DataNum = JSON.parse(Data).wndNum;

			createSetOSDSelectOption(DataNum);
		});
	}
	else {
		//隐藏标签和窗口选择下拉框
		document.getElementById("SetOSDWndId").style.display = "none";//隐藏
	}
}

function createSetOSDSelectOption(wndNum) {
	var _html = "";
	//先清空之后再添加
	$("#osdWndId").empty();
	for (var _i = 0; _i < wndNum; _i++) {
		_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
	}
	$("#osdWndId").append(_html);
}

// 标签关闭
$(window).unload(function () {
	if (oWebControl != null) {
		oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
		oWebControl.JS_Disconnect().then(function () { }, function () { });
	}
});

// 窗口resize
$(window).resize(function () {
	if (oWebControl != null) {
		oWebControl.JS_Resize(widtH, heighT);
		setWndCover();
	}
});

// 滚动条scroll
$(window).scroll(function () {
	if (oWebControl != null) {
		oWebControl.JS_Resize(widtH, heighT);
		setWndCover();
	}
});

// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
function setWndCover() {
	var iWidth = $(window).width();
	var iHeight = $(window).height();
	var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

	var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
	var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
	var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
	var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

	iCoverLeft = (iCoverLeft > 800) ? 800 : iCoverLeft;
	iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
	iCoverRight = (iCoverRight > 800) ? 800 : iCoverRight;
	iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;

	oWebControl.JS_RepairPartWindow(0, 0, 801, 400);  // 多1个像素点防止还原后边界缺失一个像素条
	if (iCoverLeft != 0) {
		oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 400);
	}
	if (iCoverTop != 0) {
		oWebControl.JS_CuttingPartWindow(0, 0, 801, iCoverTop);  // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
	}
	if (iCoverRight != 0) {
		oWebControl.JS_CuttingPartWindow(800 - iCoverRight, 0, iCoverRight, 400);
	}
	if (iCoverBottom != 0) {
		oWebControl.JS_CuttingPartWindow(0, 400 - iCoverBottom, 800, iCoverBottom);
	}
}

// 初始化插件
function initPlugin() {
	oWebControl = new WebControl({
		szPluginContainer: "playWnd",
		iServicePortStart: 15900,
		iServicePortEnd: 15909,
		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
		cbConnectSuccess: function () {
			initCount = 0;
			setCallbacks();
			oWebControl.JS_StartService("window", {
				dllPath: "./VideoPluginConnect.dll"
			}).then(function () {
				oWebControl.JS_CreateWnd("playWnd", 800, 400).then(function () {
					console.log("JS_CreateWnd success");
				});
			}, function () {

			});
		},
		cbConnectError: function () {
			console.log("cbConnectError");
			oWebControl = null;
			$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
			WebControl.JS_WakeUp("VideoWebPlugin://");
			initCount++;
			if (initCount < 3) {
				setTimeout(function () {
					initPlugin();
				}, 3000)
			} else {
				$("#playWnd").html("插件启动失败，请检查插件是否安装！");
			}
		},
		cbConnectClose: function (bNormalClose) {
			// 异常断开：bNormalClose = false
			// JS_Disconnect正常断开：bNormalClose = true
			console.log("cbConnectClose");
			oWebControl = null;
		}
	});
}

initPlugin();


// 获取公钥
function getPubKey(callback) {
	// pubKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC6nxNdtHShP1QHDxlsaNU4+XM+mXVJw5MC2X6Dj5ND5Ce+Pj4Pu1PsXFEvpfmErO5phqh+rTa7fGXqT/anF3jogG734+mIO7XP9Dcb9nPE7Yw4/VLXk0NT/Fh3NZjF3OhZa+aGgNcRIZx7f2YHIondw+oZtEWKAnnsStOSNkDcxwIDAQAB";
	// callback()
	oWebControl.JS_RequestInterface({
		funcName: "getRSAPubKey",
		argument: JSON.stringify({
			keyLength: 1024
		})
	}).then(function (oData) {
		console.log(oData)
		if (oData.responseMsg.data) {
			pubKey = oData.responseMsg.data
			callback()
		}
	})
}


// 设置窗口控制回调
function setCallbacks() {
	oWebControl.JS_SetWindowControlCallback({
		cbIntegrationCallBack: cbIntegrationCallBack
	});
}

// 推送消息
function cbIntegrationCallBack(oData) {
	showCBInfo(JSON.stringify(oData.responseMsg));
}

// RSA加密
function setEncrypt(value) {
	var encrypt = new JSEncrypt();
	encrypt.setPublicKey(pubKey);
	return encrypt.encrypt(value);
}

// 初始化
$("#init").click(function () {
	console.log('初始化')
	getPubKey(function () {
		var appkey = 'xxxxxxx';//必要参数，从海康平台拿
		var secret = setEncrypt('xxxxxxxx');//必要参数，从海康平台拿
		var ip = '你的ip';
		var szPort = $("#port").val();//端口433
		var snapDir = $("#snapDir").val();//参数都在下面有html代码
		var videoDir = $("#videoDir").val();
		var layout = $("#layout").val();
		var encryptedFields = ['secret'];
		var szShowToolbar = $("#isShowToolbar").val();
		var szShowSmart = $("#isShowSmart").val();
		var btIds = $("#btId").val();
		var rectTimes = $("#reconnectTimes").val();
		var rectDuration = $("#duration").val();

		var sel = document.getElementById("language");
		var selectedId = sel.selectedIndex;
		var v = sel.options[selectedId].value;
		var language = "zh_CN";
		if (1 == v) {
			language = "en_US";
		}

		appkey = appkey.replace(/(^\s*)/g, "");
		appkey = appkey.replace(/(\s*$)/g, "");

		secret = secret.replace(/(^\s*)/g, "");
		secret = secret.replace(/(\s*$)/g, "");

		ip = ip.replace(/(^\s*)/g, "");
		ip = ip.replace(/(\s*$)/g, "");

		szPort = szPort.replace(/(^\s*)/g, "");
		szPort = szPort.replace(/(\s*$)/g, "");

		snapDir = snapDir.replace(/(^\s*)/g, "");
		snapDir = snapDir.replace(/(\s*$)/g, "");

		videoDir = videoDir.replace(/(^\s*)/g, "");
		videoDir = videoDir.replace(/(\s*$)/g, "");

		var port = parseInt(szPort);
		var showSmart = parseInt(szShowSmart);
		var showToolbar = parseInt(szShowToolbar);
		var enableHttps = parseInt($("#isHttps").val());
		var reconnectTimes = parseInt(rectTimes);
		if (isNaN(reconnectTimes)) {
			reconnectTimes = 0;
		}
		var duration = parseInt(rectDuration);
		$(".encryptedFields").each(function (index, item) {
			var $item = $(item);
			if ($item.prop('checked')) {
				var value = $item.val();
				if (value !== 'secret') {
					encryptedFields.push(value);
				}

				// secret固定加密，其它根据用户勾选加密
				if (value == 'ip') {
					ip = setEncrypt(ip)
				}
				if (value == 'appkey') {
					appkey = setEncrypt(appkey)
				}
				if (value == 'snapDir') {
					snapDir = setEncrypt(snapDir)
				}
				if (value == 'videoDir') {
					videoDir = setEncrypt(videoDir)
				}
				if (value == 'layout') {
					layout = setEncrypt(layout)
				}
			}
		})
		encryptedFields = encryptedFields.join(",");

		if (!appkey) {
			showCBInfo("appkey不能为空！", 'error');
			return
		}
		// if (!$("#secret").val()) {
		//     showCBInfo("secret不能为空！", 'error');
		//     return
		// }
		if (!ip) {
			showCBInfo("ip不能为空！", 'error');
			return
		}
		// if (!$("#port").val()) {
		//     showCBInfo("端口不能为空！", 'error');
		//     return
		// } else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) {
		//     showCBInfo("端口填写有误！", 'error');
		//     return
		// }
		console.log({
			appkey: appkey,
			secret: secret,
			ip: ip,
			playMode: 0, // 预览
			port: port,
			snapDir: snapDir,
			videoDir: videoDir,
			layout: layout,
			enableHTTPS: enableHttps,
			showToolbar: showToolbar,
			showSmart: showSmart,
			buttonIDs: btIds,
			language: language,
			encryptedFields: encryptedFields
		})

		oWebControl.JS_RequestInterface({
			funcName: "init",
			argument: JSON.stringify({
				appkey: appkey,
				secret: secret,
				ip: ip,
				playMode: 0, // 预览
				port: port,
				snapDir: snapDir,
				videoDir: videoDir,
				layout: layout,
				enableHTTPS: enableHttps,
				showToolbar: showToolbar,
				showSmart: showSmart,
				buttonIDs: btIds,
				encryptedFields: encryptedFields,
				language: language,
				reconnectTimes: reconnectTimes,
				reconnectDuration: duration
			})
		}).then(function (oData) {
			showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
			UpdatePlayTypeValue();
			UpdateSnapTypeValue();
			UpdateSetOSDTypeValue();
			oWebControl.JS_Resize(widtH, heighT);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
		});
	})
})

setTimeout(() => {//1秒触发初始化事件
	$('#init').triggerHandler("click");//执行初始化点击事件
}, 1000);


//选择
$('#choice').on('click', function () {
	
	console.log($('#encodeDevice').val())//点图上坐标点出现的列表，选择一个地方的摄像头，拿到IndexCode
	console.log('触发初始化更改')
	getPubKey(function () {
		var appkey = 'xxxxx';
		var secret = setEncrypt('xxxxx');
		var ip = 'xxxxx';
		var szPort = $("#port").val();
		var snapDir = $("#snapDir").val();
		var videoDir = $("#videoDir").val();
		var layout = '1x1';
		var encryptedFields = ['secret'];
		var szShowToolbar = $("#isShowToolbar").val();
		var szShowSmart = $("#isShowSmart").val();
		var btIds = $("#btId").val();
		var rectTimes = $("#reconnectTimes").val();
		var rectDuration = $("#duration").val();

		var sel = document.getElementById("language");
		var selectedId = sel.selectedIndex;
		var v = sel.options[selectedId].value;
		var language = "zh_CN";
		if (1 == v) {
			language = "en_US";
		}

		appkey = appkey.replace(/(^\s*)/g, "");
		appkey = appkey.replace(/(\s*$)/g, "");

		secret = secret.replace(/(^\s*)/g, "");
		secret = secret.replace(/(\s*$)/g, "");

		ip = ip.replace(/(^\s*)/g, "");
		ip = ip.replace(/(\s*$)/g, "");

		szPort = szPort.replace(/(^\s*)/g, "");
		szPort = szPort.replace(/(\s*$)/g, "");

		snapDir = snapDir.replace(/(^\s*)/g, "");
		snapDir = snapDir.replace(/(\s*$)/g, "");

		videoDir = videoDir.replace(/(^\s*)/g, "");
		videoDir = videoDir.replace(/(\s*$)/g, "");

		var port = parseInt(szPort);
		var showSmart = parseInt(szShowSmart);
		var showToolbar = parseInt(szShowToolbar);
		var enableHttps = parseInt($("#isHttps").val());
		var reconnectTimes = parseInt(rectTimes);
		if (isNaN(reconnectTimes)) {
			reconnectTimes = 0;
		}
		var duration = parseInt(rectDuration);
		$(".encryptedFields").each(function (index, item) {
			var $item = $(item);
			if ($item.prop('checked')) {
				var value = $item.val();
				if (value !== 'secret') {
					encryptedFields.push(value);
				}

				// secret固定加密，其它根据用户勾选加密
				if (value == 'ip') {
					ip = setEncrypt(ip)
				}
				if (value == 'appkey') {
					appkey = setEncrypt(appkey)
				}
				if (value == 'snapDir') {
					snapDir = setEncrypt(snapDir)
				}
				if (value == 'videoDir') {
					videoDir = setEncrypt(videoDir)
				}
				if (value == 'layout') {
					layout = setEncrypt(layout)
				}
			}
		})
		encryptedFields = encryptedFields.join(",");

		if (!appkey) {
			showCBInfo("appkey不能为空！", 'error');
			return
		}
		// if (!$("#secret").val()) {
		//     showCBInfo("secret不能为空！", 'error');
		//     return
		// }
		if (!ip) {
			showCBInfo("ip不能为空！", 'error');
			return
		}
		// if (!$("#port").val()) {
		//     showCBInfo("端口不能为空！", 'error');
		//     return
		// } else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) {
		//     showCBInfo("端口填写有误！", 'error');
		//     return
		// }
		console.log({
			appkey: appkey,
			secret: secret,
			ip: ip,
			playMode: 0, // 预览
			port: port,
			snapDir: snapDir,
			videoDir: videoDir,
			layout: layout,
			enableHTTPS: enableHttps,
			showToolbar: showToolbar,
			showSmart: showSmart,
			buttonIDs: btIds,
			language: language,
			encryptedFields: encryptedFields
		})

		oWebControl.JS_RequestInterface({
			funcName: "init",
			argument: JSON.stringify({
				appkey: appkey,
				secret: secret,
				ip: ip,
				playMode: 0, // 预览
				port: port,
				snapDir: snapDir,
				videoDir: videoDir,
				layout: layout,
				enableHTTPS: enableHttps,
				showToolbar: showToolbar,
				showSmart: showSmart,
				buttonIDs: btIds,
				encryptedFields: encryptedFields,
				language: language,
				reconnectTimes: reconnectTimes,
				reconnectDuration: duration
			})
		}).then(function (oData) {
			showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
			UpdatePlayTypeValue();
			UpdateSnapTypeValue();
			UpdateSetOSDTypeValue();
			oWebControl.JS_Resize(widtH, heighT);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
		});
	})
	console.log('触发切换事件--')
	var cameraIndexCode = $('#encodeDevice').val();// $("#cameraIndexCode ").val()
	var streamMode = +$("#streamMode").val();
	var transMode = +$("#transMode").val();
	var gpuMode = +$("#gpuMode").val();
	var wndId = -1;  //默认为空闲窗口预览
	var isDirectEzviz = +$("#isDirectEzviz").val();

	cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
	cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

	var sel = document.getElementById("PlayType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (2 == v)//指定窗口预览
	{
		wndId = parseInt($("#playWndId option:selected").val(), 10);
	}
	else if (1 == v) //选中窗口预览
	{
		wndId = 0;
	}

	if (!cameraIndexCode) {
		showCBInfo("监控点编号不能为空！", 'error');
		return
	}

	// <!-- 看是不是批量播放 -->
	var sel = document.getElementById("isMultiPlay");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	//var v = 1;//1是批量播放 1,2，3,4 四个格子
	if (1 == v) {
		var ids = $("#wndIds").val();
		ids = ids.replace(/(^\s*)/g, "");
		if (!ids) {
			showCBInfo("批量播放时窗口序号不能为空，请填入以英文逗号分割，从1开始到当前布局最大窗口数之间的窗口Id！请自行保证仅填入数字，并且逗号左右无空格！", 'error');
			return
		}

		var tmp = ids.split(/[,]/g);
		var dataArr = [];
		for (var i = 0; i < tmp.length; i++) {
			dataArr.push({
				cameraIndexCode: cameraIndexCode,
				streamMode: streamMode,
				transMode: transMode,
				gpuMode: gpuMode,
				wndId: parseInt(tmp[i]),
				ezvizDirect: isDirectEzviz
			});
		}

		var tmpAgr = {
			"list": dataArr
		};

		oWebControl.JS_RequestInterface({
			funcName: "startMultiPreviewByCameraIndexCode",
			argument: JSON.stringify(tmpAgr)
		}).then(function (oData) {
			showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
		});

	} else {
		oWebControl.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: cameraIndexCode,
				streamMode: streamMode,
				transMode: transMode,
				gpuMode: gpuMode,
				wndId: wndId,
				ezvizDirect: isDirectEzviz
			})
		}).then(function (oData) {
			showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
		});
	}
})




//设置当前布局
$("#SetLayout").click(function () {
	var layout = $("#setlayout").val();

	oWebControl.JS_RequestInterface({
		funcName: "setLayout",
		argument: JSON.stringify({
			layout: layout
		})
	}).then(function (oData) {
		showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
		UpdatePlayTypeValue();
		UpdateSnapTypeValue();
		UpdateSetOSDTypeValue();
	});
})

//获取当前布局
$("#GetLayout").click(function () {
	oWebControl.JS_RequestInterface({
		funcName: "getLayout"
	}).then(function (oData) {
		showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
		UpdatePlayTypeValue();
		UpdateSnapTypeValue();
		UpdateSetOSDTypeValue();
	});
})

//抓图
$("#SnapPic").click(function () {
	var snapName = $("#snapName").val();
	var wndId = 0; //选中窗口抓图

	snapName = snapName.replace(/(^\s*)/g, "");
	snapName = snapName.replace(/(\s*$)/g, "");

	var sel = document.getElementById("SnapType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v)//指定窗口抓图
	{
		wndId = parseInt($("#SnapWndId option:selected").val(), 10);
	}
	else if (0 == v) //选中窗口抓图
	{
		wndId = 0;
	}

	oWebControl.JS_RequestInterface({
		funcName: "snapShot",
		argument: JSON.stringify({
			name: snapName,
			wndId: wndId
		})
	}).then(function (oData) {
		showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
	});
})

// 视频预览
var indeCodes = [{//初始化后 播放的四个视频Indexcode
	src: '4c6fd044c31f4748b60095350f7ceb21',
}, {
	src: 'd301a7d40c2943509de15dd61950d0d6',
}, {
	src: '8e220d368d33435283f914351ed6c423',
}, {
	src: '7fbbcd46ce41478d9d99ccff29bbf478',
}]
$("#startPreview").click(function () {
	for (let k = 0; k < indeCodes.length; k++) {//循环播放四个
		console.log('触发事件--', k)
		var cameraIndexCode = indeCodes[k].src;
		var streamMode = +$("#streamMode").val();
		var transMode = +$("#transMode").val();
		var gpuMode = +$("#gpuMode").val();
		var wndId = -1;  //默认为空闲窗口预览
		var isDirectEzviz = +$("#isDirectEzviz").val();

		cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
		cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

		var sel = document.getElementById("PlayType");
		var selectedId = sel.selectedIndex;
		var v = sel.options[selectedId].value;
		if (2 == v)//指定窗口预览
		{
			wndId = parseInt($("#playWndId option:selected").val(), 10);
		}
		else if (1 == v) //选中窗口预览
		{
			wndId = 0;
		}

		if (!cameraIndexCode) {
			showCBInfo("监控点编号不能为空！", 'error');
			return
		}

		// <!-- 看是不是批量播放 -->
		var sel = document.getElementById("isMultiPlay");
		var selectedId = sel.selectedIndex;
		var v = sel.options[selectedId].value;
		//var v = 1;
		if (1 == v) {
			var ids = $("#wndIds").val();
			ids = ids.replace(/(^\s*)/g, "");
			if (!ids) {
				showCBInfo("批量播放时窗口序号不能为空，请填入以英文逗号分割，从1开始到当前布局最大窗口数之间的窗口Id！请自行保证仅填入数字，并且逗号左右无空格！", 'error');
				return
			}

			var tmp = ids.split(/[,]/g);
			var dataArr = [];
			for (var i = 0; i < tmp.length; i++) {
				dataArr.push({
					cameraIndexCode: cameraIndexCode,
					streamMode: streamMode,
					transMode: transMode,
					gpuMode: gpuMode,
					wndId: parseInt(tmp[i]),
					ezvizDirect: isDirectEzviz
				});
			}

			var tmpAgr = {
				"list": dataArr
			};

			oWebControl.JS_RequestInterface({
				funcName: "startMultiPreviewByCameraIndexCode",
				argument: JSON.stringify(tmpAgr)
			}).then(function (oData) {
				showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
			});

		} else {
			oWebControl.JS_RequestInterface({
				funcName: "startPreview",
				argument: JSON.stringify({
					cameraIndexCode: cameraIndexCode,
					streamMode: streamMode,
					transMode: transMode,
					gpuMode: gpuMode,
					wndId: wndId,
					ezvizDirect: isDirectEzviz
				})
			}).then(function (oData) {
				showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
			});
		}
	}

})

//返回重新初始化
$('#myBiaoZhu').on('click', function () {

	console.log('重新初始化')
	$('#init').triggerHandler("click");
	console.log('重新加载视频')
	$('#startPreview').triggerHandler("click")
})

setTimeout(() => {//进入页面1秒后初始化播放器插件，2秒触发视频点击事件，播放四个监控视频
	$('#startPreview').triggerHandler("click")
}, 2000);
//字符叠加
$("#setOSDText").click(function () {
	if (!$("#Xsite").val()) {
		showCBInfo("起点X坐标不能为空！", 'error');
		return
	}
	if (!$("#Ysite").val()) {
		showCBInfo("起点Y坐标不能为空！", 'error');
		return
	}
	if (!$("#RColor").val()) {
		showCBInfo("字体RGB颜色R分量不能为空！", 'error');
		return
	}
	if (!$("#GColor").val()) {
		showCBInfo("字体RGB颜色G分量不能为空！", 'error');
		return
	}
	if (!$("#BColor").val()) {
		showCBInfo("字体RGB颜色B分量不能为空！", 'error');
		return
	}
	if (!$("#fontSize").val()) {
		showCBInfo("字号不能为空！", 'error');
		return
	}

	var text = $("#OSDText").val();
	var x = +$("#Xsite").val();
	var y = +$("#Ysite").val();
	var fs = +$("#fontSize").val();
	var ColorR = parseInt($("#RColor").val());
	var ColorG = parseInt($("#GColor").val());
	var ColorB = parseInt($("#BColor").val());
	var Color = 65536 * ColorB + 256 * ColorG + ColorR;
	var wndId = 0;
	var at = +$("#alignType").val();
	var isBold = +$("#isBold").val();


	var sel = document.getElementById("SetOSDType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v)//指定窗口字符叠加
	{
		wndId = parseInt($("#osdWndId option:selected").val(), 10);
	}
	else  //空闲窗口字符叠加
	{
		wndId = 0;
	}

	oWebControl.JS_RequestInterface({
		funcName: "drawOSD",
		argument: JSON.stringify({
			text: text,
			x: x,
			y: y,
			color: Color,
			fontSize: fs,
			alignType: at,
			bold: isBold,
			wndId: wndId
		})
	}).then(function (oData) {
		showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
	});
})

// 停止预览
$("#stopPreview").click(function () {
	var sel = document.getElementById("stopMode");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {  // 批量停止

		var ids = $("#stopWndIds").val();
		ids = ids.replace(/(^\s*)/g, "");
		if (!ids) {
			showCBInfo("批量播放时窗口序号不能为空，请填入以英文逗号分割，从1开始到当前布局最大窗口数之间的窗口Id！请自行保证仅填入数字，并且逗号左右无空格！", 'error');
			return
		}

		var tmp = ids.split(/[,]/g);
		var dataArr = [];
		for (var i = 0; i < tmp.length; i++) {
			dataArr.push({
				wndId: parseInt(tmp[i])
			});
		}

		var tmpAgr = {
			"list": dataArr
		};

		oWebControl.JS_RequestInterface({
			funcName: "stopMultiPlay",
			argument: JSON.stringify(tmpAgr)
		}).then(function (oData) {
			showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
		});
	} else {  // 停止全部
		oWebControl.JS_RequestInterface({
			funcName: "stopAllPreview"
		}).then(function (oData) {
			showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
		});
	}
})

// 反初始化
function uninit() {
	oWebControl.JS_RequestInterface({
		funcName: "uninit"
	}).then(function (oData) {
		showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
	});
}
$("#uninit").click(uninit)


// 显示回调信息
function showCBInfo(szInfo, type) {
	if (type === 'error') {
		szInfo = "<div style='color: red;'>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
	} else {
		szInfo = "<div>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
	}
	$("#cbInfo").html(szInfo + $("#cbInfo").html());
}

$("#clear").click(function () {
	$("#cbInfo").html('');
})

// 格式化时间
function dateFormat(oDate, fmt) {
	var o = {
		"M+": oDate.getMonth() + 1, //月份
		"d+": oDate.getDate(), //日
		"h+": oDate.getHours(), //小时
		"m+": oDate.getMinutes(), //分
		"s+": oDate.getSeconds(), //秒
		"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
		"S": oDate.getMilliseconds()//毫秒
	};
	if (/(y+)/.test(fmt)) {
		fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
	}
	for (var k in o) {
		if (new RegExp("(" + k + ")").test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		}
	}
	return fmt;
}

function textbox(obj, min, max) {
	obj.value = obj.value.replace(/[^\d]/g, '');
	if (parseInt(obj.value) == obj.value && parseInt(obj.value) >= min && parseInt(obj.value) <= max) { }
	else {
		if (parseInt(obj.value) < min) {
			obj.value = min;
		}
		if (parseInt(obj.value) > max) {
			obj.value = max;
		}
	}
}

这些是他demo里控制播放器的，我没删就留着了，大家要用的时候先下载播放器，然后里面有demo改着做一做。

 <div id="operate" class="operate" style="display: none;">
                        <div class="module">
                            <div class="item"><span class="label">合作方Appkey:</span><input id="appkey" type="text"
                                    value=""></div>
                            <div class="item"><span class="label">合作方Secret:</span><input id="secret" type="text"
                                    value=""></div>
                            <div class="item"><span class="label">平台IP地址:</span><input id="ip" type="text" value="">
                            </div>
                            <div class="item">
                                <span class="label">启用HTTPS协议</span>
                                <select id="isHttps" onchange="UpdateValue()" value="启用">
                                    <option value="1" selected>启用</option>
                                </select>
                            </div>
                            <div class="item"><span class="label">平台端口:</span><input id="port" type="text" value="443">
                            </div>
                            <div class="item"><span class="label">抓图存储路径:</span><input id="snapDir" type="text"
                                    value="D:\SnapDir">
                            </div>
                            <div class="item"><span class="label">录像存储路径:</span><input id="videoDir" type="text"
                                    value="D:\VideoDir">
                            </div>
                            <div class="item">
                                <span class="label">窗口布局:</span>
                                <select id="layout" value="2x2">
                                    <option value="1x1">1x1</option>
                                    <option value="2x2" selected>2x2</option>
                                    <option value="3x3">3x3</option>
                                    <option value="4x4">4x4</option>
                                    <option value="5x5">5x5</option>
                                    <option value="1x2">1x2</option>
                                    <option value="1x4">1x4</option>
                                    <option value="4x6">4x6</option>
                                    <option value="1+2">1+2</option>
                                    <option value="1+5">1+5</option>
                                    <option value="1+7">1+7</option>
                                    <option value="1+8">1+8</option>
                                    <option value="1+9">1+9</option>
                                    <option value="1+12">1+12</option>
                                    <option value="1+16">1+16</option>
                                    <option value="4+9">4+9</option>
                                    <option value="1+1+12">1+1+12</option>
                                    <option value="3+4">3+4</option>
                                </select>
                            </div>
                            <div class="item">
                                <span class="label">显示工具栏</span>
                                <select id="isShowToolbar" value="1">
                                    <option value="0">隐藏</option>
                                    <option value="1" selected>显示</option>
                                </select>
                            </div>
                            <div class="item">
                                <span class="label">显示智能信息</span>
                                <select id="isShowSmart" value="1">
                                    <option value="0">隐藏</option>
                                    <option value="1" selected>显示</option>
                                </select>
                            </div>
                            <div class="item"><span class="label">重连次数:</span><input id="reconnectTimes" type="text"
                                    value="5"></div>
                            <div class="item">
                                <span class="label">重连间隔:</span>
                                <select id="duration" value="5">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                    <option value="5" selected>5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </div>
                            <div class="item">
                                <span class="label">多语言</span>
                                <select id="language" value="0">
                                    <option value="0" selected>中文</option>
                                    <option value="1">英文</option>
                                </select>
                            </div>
                            <div class="item"><span class="label">工具条按钮ID集:</span><input id="btId" type="text"
                                    value="1,0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"></div>
                            <div class="item">
                                <span class="label">加密字段:</span>
                                <div style="display: inline-block; vertical-align: top;">
                                    <label><input type="checkbox" value="secret" disabled checked>secret</label><br>
                                    <label><input class="encryptedFields" type="checkbox"
                                            value="appkey">appkey</label><br>
                                    <label><input class="encryptedFields" type="checkbox" value="ip">ip</label><br>
                                    <label><input class="encryptedFields" type="checkbox"
                                            value="snapDir">抓图路径</label><br>
                                    <label><input class="encryptedFields" type="checkbox"
                                            value="videoDir">录像路径</label><br>
                                    <label><input class="encryptedFields" type="checkbox" value="layout">布局</label>
                                </div>
                            </div>
                            <div class="item">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button
                                    style="width:10px;padding:0;margin:0;" id="init" class="btn">初始化</button>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button
                                    style="width:10px;padding:0;margin:0;" id="uninit" class="btn">反初始化</button>
                            </div>
                        </div>
                        <div class="module">
                            <div class="item">
                                &nbsp;&nbsp;&nbsp;
                                <span style="width:50px;padding:0;margin:0;" class="label">布局：</span>
                            </div>
                            <div class="item">
                                <span class="label">设置布局:</span>
                                <select id="setlayout" value="2x2">
                                    <option value="1x1">1x1</option>
                                    <option value="2x2" selected>2x2</option>
                                    <option value="3x3">3x3</option>
                                    <option value="4x4">4x4</option>
                                    <option value="5x5">5x5</option>
                                    <option value="1x2">1x2</option>
                                    <option value="1x4">1x4</option>
                                    <option value="4x6">4x6</option>
                                    <option value="1+2">1+2</option>
                                    <option value="1+5">1+5</option>
                                    <option value="1+7">1+7</option>
                                    <option value="1+8">1+8</option>
                                    <option value="1+9">1+9</option>
                                    <option value="1+12">1+12</option>
                                    <option value="1+16">1+16</option>
                                    <option value="4+9">4+9</option>
                                    <option value="1+1+12">1+1+12</option>
                                    <option value="3+4">3+4</option>
                                </select>
                            </div>
                            <div class="item">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button style="width:10px;padding:0;margin:0;" id="SetLayout" class="btn">设置布局</button>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button style="width:10px;padding:0;margin:0;" id="GetLayout" class="btn">获取布局</button>
                            </div>
                            <div class="item">
                                &nbsp;&nbsp;&nbsp;
                                <span style="width:50px;padding:0;margin:0;" class="label">预览：</span>
                            </div>
                            <div class="item">
                                <span class="label">预览模式：</span>
                                <select id="PlayType" onchange="UpdatePlayTypeValue()" value="0">
                                    <option value="0" selected>空闲窗口预览</option>
                                    <option value="1">选中窗口预览</option>
                                    <option value="2">指定窗口预览</option>
                                </select>
                            </div>
                            <div class="item" id="PreviewWndId" style="display: none;">
                                <span class="label">窗口ID：</span>
                                <select id="playWndId" value="0">
                                </select>
                            </div>
                            <div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text"
                                    value=""></div>
                            <div class="item">
                                <span class="label">主子码流标识：</span>
                                <select id="streamMode" value="0">
                                    <option value="0">主码流</option>
                                    <option value="1">子码流</option>
                                </select>
                            </div>
                            <div class="item">
                                <span class="label">传输协议：</span>
                                <select id="transMode" value="1">
                                    <option value="1">TCP</option>
                                    <option value="0">UDP</option>
                                </select>
                            </div>
                            <div class="item">
                                <span class="label">是否启用GPU硬解：</span>
                                <select id="gpuMode" value="0">
                                    <option value="0">不启用</option>
                                    <option value="1">启用</option>
                                </select>
                            </div>
                            <div class="item">
                                <span class="label">是否直连萤石预览：</span>
                                <select id="isDirectEzviz" value="0">
                                    <option value="0">不启用</option>
                                    <option value="1">启用</option>
                                </select>
                            </div>
                            <div class="item">
                                <span class="label">是否批量播放：</span>
                                <select id="isMultiPlay" onchange="UpdateMultiPlayValue()" value="1">
                                    <option value="0">不启用</option>
                                    <option value="1">启用</option>
                                </select>
                            </div>
                            <div class="item" id="multiPlayWndIds" style="display: none;">
                                <span class="label">窗口ID集：</span>
                                <input id="wndIds" type="text" value="1,2,3,4"
                                    placeholder="以英文逗号分割，从1开始,最大为窗口窗口数值，请自行保证输入的合法性">
                                </select>
                            </div>
                            <div class="item">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <!-- <button style="width:20px;padding:0;margin:0;" id="startPreview" class="btn">预览</button> -->
                            </div>
                            <div class="item">
                                <span style="width:90px;padding:0;margin:0;" class="label">停止预览：</span>
                            </div>
                            <div class="item">
                                <span class="label">停止预览模式：</span>
                                <select id="stopMode" onchange="UpdateStopPlayValue()" value="1">
                                    <option value="0">停止全部预览</option>
                                    <option value="1">批量停止预览</option>
                                </select>
                            </div>
                            <div class="item" id="multiStopPlayWndIds" style="display: none;">
                                <span class="label">窗口ID集：</span>
                                <input id="stopWndIds" type="text" value=""
                                    placeholder="以英文逗号分割，从1开始,最大为窗口窗口数值，请自行保证输入的合法性">
                                </select>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button style="width:50;padding:0;margin:0;" id="stopPreview" class="btn">停止预览</button>
                            <div class="item">
                                &nbsp;&nbsp;&nbsp;
                                <span style="width:50px;padding:0;margin:0;" class="label">抓图：</span>
                            </div>
                            <div class="item">
                                <span class="label">抓图模式：</span>
                                <select id="SnapType" onchange="UpdateSnapTypeValue()" value="0">
                                    <option value="0" selected>选中窗口抓图</option>
                                    <option value="1">指定窗口抓图</option>
                                </select>
                            </div>
                            <div class="item" id="SnapShotWndId" style="display: none;">
                                <span class="label">窗口ID：</span>
                                <select id="SnapWndId" value="0">
                                </select>
                            </div>
                            <div class="item">
                                &nbsp;&nbsp;
                                <span style="padding:0;margin:0;" class="label">图片绝对路径名称：</span>
                                <input id="snapName" type="text" value="d:\SnapDir\test.jpg">
                            </div>
                            <div class="item">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button style="width:10px;padding:0;margin:0;" id="SnapPic" class="btn">预览抓图</button>
                            </div>
                        </div>
                        <!--字符叠加 -->
                        <div class="module" style="height:50xp;padding:10;margin:10;">
                            <div class="item">
                                <span style="width:100px;padding:0;margin:0;" class="label">字符串叠加：</span>
                            </div>
                            <div class="item">
                                <span class="label">叠加模式：</span>
                                <select id="SetOSDType" onchange="UpdateSetOSDTypeValue()" value="0">
                                    <option value="0" selected>选中窗口字符串叠加</option>
                                    <option value="1">指定窗口字符串叠加</option>
                                </select>
                            </div>
                            <div class="item" id="SetOSDWndId" style="display: none;">
                                <span class="label">窗口ID：</span>
                                <select id="osdWndId" value="0">
                                </select>
                            </div>
                            <div class="item">
                                <span class="label">起点X坐标：</span><input id="Xsite" type="text" value="0" maxlength="4"
                                    onkeyup="JavaScript:textbox(this, 0, 1000)" placeholder="请输入0~1000的数字">
                                <span class="label">起点Y坐标：</span><input id="Ysite" type="text" value="0" maxlength="4"
                                    onkeyup="JavaScript:textbox(this, 0, 1000)" placeholder="请输入0~1000的数字">
                                <span class="label" style="width:150px;padding:0;margin:0;">字体RGB颜色：</span>
                                <input id="RColor" type="text" style="width:50px;padding:0;margin:0;" value="255"
                                    maxlength="3" onkeyup="JavaScript:textbox(this, 0, 255)">
                                <input id="GColor" type="text" style="width:50px;padding:0;margin:0;" value="0"
                                    maxlength="3" onkeyup="JavaScript:textbox(this, 0, 255)">
                                <input id="BColor" type="text" style="width:50px;padding:0;margin:0;" value="0"
                                    maxlength="3" onkeyup="JavaScript:textbox(this, 0, 255)">
                                <span class="label">字号：</span><input id="fontSize" type="text" value="0" maxlength="3"
                                    onkeyup="JavaScript:textbox(this, 0, 100)" placeholder="请输入0~100的数字">
                                <span class="label">字符串对齐方式：</span>
                                <select id="alignType" value="0">
                                    <option value="0" selected>居左对齐</option>
                                    <option value="1">居中对齐</option>
                                    <option value="2">居右对齐</option>
                                </select>
                                <span class="label">字符串是否加粗：</span>
                                <select id="isBold" value="0">
                                    <option value="0" selected>不加粗</option>
                                    <option value="1">加粗</option>
                                </select>
                                <span class="label">待叠加字符串：</span><textarea id="OSDText" type="text"
                                    style="width:320px;height:100px;" value="20"></textarea>
                            </div>
                            <div class="item">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button style="padding:0;margin:0;" id="setOSDText" class="btn">字符串叠加</button>
                            </div>

                        </div>
                        <fieldset class="cbInfoDiv">
                            <legend>返回值信息</legend>
                            <div id="cbInfo" class="cbInfo"></div>
                            <button id="clear">清空</button>
                        </fieldset>
                    </div>

最后放下所有效果图：
初始化

选择一个坐标点

选择成功后，红框里的监控跟换，这个黄色的框，点击哪个监控就回选择到哪个，然后替换也是替换黄框里

就是个这么效果，欢迎留言讨论