视频监控修改添加右击全屏按钮

This commit is contained in:
zzyuan 2025-07-10 15:06:33 +08:00
parent 8924dafb0a
commit b1fc8417cd
3 changed files with 61 additions and 14 deletions

View File

@ -13,14 +13,33 @@ html, body {
padding: 0;
border: 0;
overflow: hidden;
position: relative;
}
.plugin {
width: 1300px;
height: 680px;
}
.vpopmenu{
position: absolute;
background: #666;
color: #fff;
top:0;
left: 0;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
display: none;
}
</style>
<body>
<div id="divPlugin" class="plugin"></div>
<div id="r_menu" class="vpopmenu">
<!-- <div id="stop_realPlay" onclick="clickStopRealPlay();">停止预览</div> -->
<div id="fullScreen" onclick="clickFullScreen();">全屏</div>
</div>
</body>
<script src="./codebase/jquery-3.6.4.min.js"></script>
<script src="./codebase/encryption/AES.js"></script>
@ -32,6 +51,33 @@ html, body {
// var urlParams = new URLSearchParams(window.location.search);
// var type = urlParams.get('type');
// console.log(type)
$(function () {
bindMenu();
const menu = document.getElementById("r_menu");
function bindMenu(){
//给所有class=plugin的div都加上右键菜单
let $BIPanel = $("div[class='plugin']").contextmenu(function(ev) {
let oEvent = ev || event;
//自定义的菜单显示
menu.style.display = "block";
//让自定义菜单随鼠标的箭头位置移动
menu.style.left = oEvent.clientX + "px";
menu.style.top = oEvent.clientY + "px";
//return false阻止系统自带的菜单
//return false必须写在最后否则自定义的右键菜单也不会出现
return false;
});
}
//实现点击document自定义菜单消失
document.onclick = function() {
menu.style.display = "none";
}
});
function clickFullScreen(){
WebVideoCtrl.I_FullScreen(true);
}
// $(function () {
// var height = '350';
// var width = $("body").width();

View File

@ -109,15 +109,17 @@ methods:{
oWebVideoCtrl2.I_InsertOBJECTPlugin("divPlugin");
oWebVideoCtrl2.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
success: function (xmlDoc) {
// console.log(that.formatDateTime(that.dateRange[0]))
// console.log(that.formatDateTime(that.dateRange[1]))
// oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
// szStartTime:that.formatDateTime(that.dateRange[0]),
// szEndTime:that.formatDateTime(that.dateRange[1]),
// iChannelID: that.chosenChannel2,
// iStreamType: oLiveView.iStreamType,
// bZeroChannel: oLiveView.bZeroChannel
// });
console.log(that.formatDateTime(that.dateRange[0]))
console.log(that.formatDateTime(that.dateRange[1]))
setTimeout(function () {
oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
szStartTime:that.formatDateTime(that.dateRange[0]),
szEndTime:that.formatDateTime(that.dateRange[1]),
iChannelID: that.chosenChannel2,
iStreamType: oLiveView.iStreamType,
bZeroChannel: oLiveView.bZeroChannel
});
}, 1000);
}
});
}
@ -182,7 +184,7 @@ methods:{
iStreamType: oLiveView.iStreamType,
bZeroChannel: oLiveView.bZeroChannel
});
}, 800);
}, 1000);
},
defaultDateRange() {
const end = new Date(new Date().toLocaleDateString());

View File

@ -160,7 +160,7 @@ methods:{
async handleNodeClick(data) {
if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
let obj = JSON.parse(data.deviceExtendInfo)
this.chosenChannel = 18;
this.chosenChannel = 22;
this.iframeLoaded(this.chosenWinNo,this.chosenChannel)
}else{
this.$modal.msgError("设备未绑定通道号");
@ -188,9 +188,8 @@ methods:{
iChannelID: Channel,
bZeroChannel: oLiveView.bZeroChannel
});
}, 500);
}, 1000);
},
}
}
</script>