这是原发直接能在系统中使用。里面的样式自己修改，主要是在引入时出现黑色的框就是引入成功，需要在public文件夹中引入h5player.min.js文件就可以。
<template><div class="Shiping"><el-container><el-header><div class="cont"><div class="container"><div class="item1">水库</div><div class="item2">视频管理系统</div></div><div class="container1"><div class="ite" @click="zhuxiao">关闭</div></div></div></el-header><el-container><el-aside><el-row class="tac"><el-col :span="12"><el-menu default-active="2" @open="handleOpen" @close="handleClose" style="padding-bottom:20px"><el-submenu v-for="(item, index) in menuData" :index="String(index)" :key="item.lbname"><template slot="title"><i class="el-icon-location"></i><span>{{ item.lbname }}</span></template><el-menu-item v-for="(subItem, subIndex) in item.list" :index="String(subIndex)" :key="subItem.lbname" @click="selectSXT1(subItem)">{{ subItem.jknm }}</el-menu-item></el-submenu></el-menu></el-col></el-row></el-aside><el-main><div class="container"><div class="top"><div id="player1"></div></div></div></el-main></el-container></el-container></div>
</template><script>
import "../../../../public/js/h5player.min.js"
import { getCameraPreview, getCameraList, futureRain,getVideoURL, getBySbSpjk,getControl,getPreset,setPreset,delPreset} from "@/api/business/srceenShow";
export default {data(){return{//videoDialog标题currentCameraInfogetHHHvideoTitle: "",//播放个数splitNum: 9,//普通模式和高级模式mode: 1,//播放对象player1: null,//图片数据存放imageData: null,//播放地址urls: {realplay: "ws://60.212.191.94:559/openUrl/gV8OTMQ",},//当前摄像头currentCameraInfo: {},//是否设置预置点位标识isSetPreset: false,//预置点位presetList: [// {// "presetPointName":"无",// "presetPointIndex":0// }],volume: 30,//云台控制请求参数queryControlParam: {cameraCodeIndex: null,//默认为1 停止 0为开始action: 1,//命令command: null,//移动速度 1-100 默认为50speed: 10,// 预置点下标presetIndex: null,//预置点名称presetName: null,},//视频监控列表子项cameraList:[],dataList: [], // 从后端获取的数据menuData: [] // 转换后的菜单数据}},created() {getCameraList().then((response) => {// 处理获取到的数据this.dataList = response.data;// 将获取到的数据转换为菜单数据结构this.transformToMenuData(this.dataList);});},mounted() {this.getList();this.createPlayer()this.arrangeWindow()// this.getHHH("9f83a4c1b0cc4542bfccdfba8adf4e5d");// setTimeout(() => {// this.realplay()// this.arrangeWindow()// }, 2000); // 100毫秒的延迟 改为2秒。。。},methods:{//点击列表中数据触发 获取摄像头播放地址getHHH(cameraCode) {let query = { cameraIndexCode:cameraCode };this.queryControlParam.cameraCodeIndex = cameraCodegetVideoURL(query).then(resp=>{this.urls.realplay = resp.data.urlthis.getPreset()})},//内层的点击播放视频事件selectSXT1(subItem) { const jkcode = subItem.jkcode;this.getHHH(jkcode);setTimeout(() => {this.realplay()// this.arrangeWindow()}, 2000); // 100毫秒的延迟 改为2秒。。。this.player1.JS_SelectWnd().then(() => {console.info('JS_SelectWnd success');// do you want...},(err) => {console.info('JS_SelectWnd failed');// do you want...});},transformToMenuData(dataList) {this.menuData = dataList.map(item => {return {lbname: item.lbname,list: item.list,total: item.total};});},getList() {getCameraList().then((response) => {this.dataList = response.data;// console.log(this.dataList,"----------------------------00000000000000")// this.cameraList = this.dataList.filter(x=>x.lbname == "溢洪闸")[0].list});},zhuxiao(){this.$router.push({ path: '/index' })this.stopAllPlay()},handleOpen(key, keyPath) {// console.log(key, keyPath);},handleClose(key, keyPath) {// console.log(key, keyPath);},//-----------------------------//返回预置点位backPreset(){this.queryControlParam.presetIndex = 1this.control("GOTO_PRESET")},//查看预置点位getPreset(){getPreset(this.queryControlParam).then(resp=>{this.presetList=resp.data.list// console.log(this.presetList,resp,"预置点位")})},//设置预置点位setPreset(){//查询出最大的下标编码+1并赋值let maxIndex = this.presetList.map(i=>{return i.presetPointIndex}).reduce((a, b)=>a>b?a:b ) || 1;this.queryControlParam.presetIndex = Number(maxIndex)+1setPreset(this.queryControlParam).then(resp=>{// console.log(resp,"设置预置点位")if(resp.code=='0'){this.isSetPreset = falsethis.$message.success("设置预置点位成功")this.getPreset()}})},//删除预置点位delPreset(){// console.log(this.queryControlParam,"请求参数")delPreset(this.queryControlParam).then(resp=>{// console.log(resp,"删除预置点位")if(resp.code=='0'){this.$message.success("删除预置点位成功")this.getPreset()}})},//云台控制 开始 操作control(command) {if (this.player1.isOk) {this.$message.info("监控未打开，无法操作")return}this.queryControlParam.cameraCodeIndex = this.currentCameraInfo.jkcodethis.queryControlParam.action = 0this.queryControlParam.command = commandthis.getControl()setTimeout(() => {this.controlStop()}, 3000)},//云台控制 暂停controlStop() {if (this.player1.isOk) {this.$message.info("监控未打开，无法操作")return}// setTimeout(() => {this.queryControlParam.cameraCodeIndex = this.currentCameraInfo.jkcodethis.queryControlParam.action = 1this.getControl()// }, 3000); // 100毫秒的延迟 改为3秒。。。},//云台控制接口getControl() {if (this.queryControlParam.cameraCodeIndex == null) {this.$message.info("未获取摄像头信息，请重试")}getControl(this.queryControlParam).then(resp => {// console.log(resp)})},//控制分屏个数arrangeWindow() {let splitNum = this.splitNumthis.player1.JS_ArrangeWindow(splitNum).then(() => {// console.log(`arrangeWindow to ${splitNum}x${splitNum} success`)},e => {console.error(e)})},//放大全屏wholeFullScreen() {this.player1.JS_FullScreenDisplay(true).then(() => {// console.log(`wholeFullScreen success`)},e => {console.error(e)})},//声音控制openSound() {this.muted = falsethis.player1.JS_OpenSound().then(() => {// console.log('openSound success')this.muted = false},e => {console.error(e)})},closeSound() {this.muted = truethis.player1.JS_CloseSound().then(() => {// console.log('closeSound success')this.muted = true},e => {console.error(e)})},setVolume(value) {let player1 = this.player1,index = player1.currentWindowIndexthis.player1.JS_SetVolume(index, value).then(() => {// console.log('setVolume success', value)},e => {console.error(e)})},init() {let iWidth = 1144let iHeight = 698this.player1.JS_Resize(iWidth, iHeight)},/*** 初始化播放器*/createPlayer() {this.player1 = new window.JSPlugin({szId: "player1",szBasePath: "/js/",iMaxSplit: 3,iCurrentSplit: 1,openDebug: true,oStyle: {borderSelect: "#FFCC00",},})// this.init()//视频是否播放标识 0 播放 1 停止this.player1.isOk = 1// 事件回调绑定this.player1.JS_SetWindowControlCallback({windowEventSelect: function (iWndIndex) {//插件选中窗口回调// console.log('windowSelect callback: ', iWndIndex);// that.$emit('getWndPk',iWndIndex) },pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {//插件错误回调// console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);// that.showErrror(iErrorCode,iWndIndex) },windowEventOver: function (iWndIndex) {//鼠标移过回调//console.log(iWndIndex);},windowEventOut: function (iWndIndex) {//鼠标移出回调//console.log(iWndIndex);},windowEventUp: function (iWndIndex) {//鼠标mouseup事件回调//console.log(iWndIndex);},windowFullCcreenChange: function (bFull) {//全屏切换回调// console.log('fullScreen callback: ', bFull);},firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {//首帧显示回调// console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);},performanceLack: function () {//性能不足回调// console.log('performanceLack callback: ');},})// console.log(this.player1,"打印player")},cancelCapture() {// this.openPlay = false;// this.player1 = nullthis.imageData = null},// 关闭所有视频stopAllPlay () {this.player1.JS_StopRealPlayAll().then(() => {this.playback.rate = 0// console.log('stopAllPlay success')this.closeVideoTree()},e => { console.error(e) })},/* 预览&对讲 */realplay() {// this.init()let { player1, mode, urls } = this,index = player1.currentWindowIndex,playURL = urls.realplay// console.log(playURL,'playURL')this.player1.JS_Play(playURL, { playURL, mode }, index).then(() => {//视频已播放this.player1.isOk = 0// console.log('realplay success')index = index + 1;if (index == this.maxSplit) { index = 0 }player1.JS_SelectWnd(index);},e => {console.error(e)})},stopPlay() {this.player1.JS_Stop().then(() => {this.player1.isOk = 1// console.log('stop realplay success')},e => {console.error(e)})this.queryControlParam = {cameraCodeIndex: null,//默认为1 停止 0为开始action: 1,//命令command: null,//移动速度 1-100 默认为50speed: 50,// 预置点下标presetIndex: null,}},}
}
</script><style lang="scss" scoped>
.Shiping{width: 70vw;// height: 80vh;background-image: url("~@/assets/images/jianjie.png");background-size: 100% 100%;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -46%);.el-header, .el-footer {// color: #ca2d2d;background: linear-gradient(-90deg, #14234B, #0C3C78);// line-height: 40px;.cont{display: flex;justify-content: space-between;.container {display: grid;grid-template-columns: auto auto; /* 指定两列 */padding: 10px;.item1 {padding: 4px;color: #fbf8f8;font-size: 26px;}.item2 {color: #f8f5f5;font-size: 16px;padding: 10px;}}.container1 {display: grid;grid-template-rows: auto;padding: 20px;.ite {color: #fbf8f8;font-size: 18px;cursor: pointer;}}}}.el-aside {background: #264f80;line-height: 190px;width: 300px;// color: #cf2626;span{font-size: 18px;color: #faf6f6;}.el-menu {width: 350px;height: 200px;background: #264f80;border-right: 0px ;::v-deep .el-submenu__title:hover {background-color: #264f80;color: #faf6f6;}::v-deep .el-menu-item-group__title {padding: 0px 0px 0px 10px;line-height: normal;font-size: 18px;color: #909399;}.el-submenu .el-menu-item {background: #264f80;color: #faf6f6;height: 40px;}}&::-webkit-scrollbar {width: 5px;height: 2px;}&::-webkit-scrollbar-track {background: #1b5689;border-radius: 10px;}&::-webkit-scrollbar-thumb {background: #70c0ff;border-radius: 10px;}}.el-main {background: #26426D;text-align: center;// line-height: 820px;// height: 860px;// padding: 10px 10px;.container {display: flex;flex-direction: column;height: 840px; /* 设置高度，方便查看效果 */.top{width: 100%;height: 100%;#player1{width: 80%;height: 100%;}}}.container > div {display: flex;justify-content: space-around;align-items: center;flex: 1;}.container > div > div {width: 480px;height: 480px;// background-color: rgb(13, 13, 13);margin: 10px;}&::-webkit-scrollbar {width: 5px;}&::-webkit-scrollbar-track {background: #1b5689;border-radius: 10px;}&::-webkit-scrollbar-thumb {background: #70c0ff;border-radius: 10px;}}
}
</style>原文件包：海康开放平台
这是需要导入的包在bin目录下
