From 4ec959d7c2ef1d8dd3af287814ca8a27650b99f7 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 11 一月 2023 15:33:42 +0800 Subject: [PATCH] Merge branch 'dev1.0' of http://42.193.1.25:9521/r/sccg_ui into dev1.0 --- src/views/video/index.vue | 202 +++++++++++++++++++++++++++++-------------------- 1 files changed, 119 insertions(+), 83 deletions(-) diff --git a/src/views/video/index.vue b/src/views/video/index.vue index 2d9e95c..768e4ae 100644 --- a/src/views/video/index.vue +++ b/src/views/video/index.vue @@ -1,10 +1,10 @@ <template> - <el-container style="height: 100%"> + <el-container class="video-container" style="height: 100%"> <el-aside heigth="100%" width="200px"> <department-aside @selectedDepartment="selectedDepartment" /> </el-aside> - <el-container> + <el-container class="video-body-right"> <el-header style="display: flex; flex-direction: column; height: 120px"> <div style="display: flex; justify-content: space-between; height: 80px" @@ -18,7 +18,7 @@ " >鏁翠綋瓒嬪娍</span > - <el-date-picker v-model="value" type="date" placeholder="閫夋嫨鏃ユ湡"> + <el-date-picker class="video-time-select" v-model="value" type="date" placeholder="閫夋嫨鏃ユ湡"> </el-date-picker> </div> <!-- <div style="height: 60px; display: flex; justify-content: flex-start"> @@ -49,7 +49,7 @@ left: 50px; " > - {{ item.name }}{{ item.community }} + {{ item.community }}-{{ item.name }} </div> <video :id="item.id" @@ -58,7 +58,6 @@ preload="auto" width="400px" height="300px" - :src="item.urlAddress" type="video/mp4" ></video> <div class="button-div"> @@ -71,7 +70,6 @@ <el-dialog :visible.sync="dialogCreate" title="鏌ョ湅瑙嗛" - width="80%" v-show="dialogCreate" :before-close="handleClose2" > @@ -129,36 +127,39 @@ mounted() {}, methods: { loadVideo(item) { - if (Hls.isSupported()) { - var video = document.getElementById(item.id); - var hls = new Hls(); - videoPoint.getVideoPointUrl(item.platResourceId).then((res) => { - - if (res.code == 0) { - hls.loadSource(res.data); - hls.attachMedia(video); - hls.on(Hls.Events.MANIFEST_PARSED, function () { - video.play(); - document.body.addEventListener( - "click", - function () { - video.play(); - }, - false - ); - }); - setTimeout(() => { - video.play(); - }, 2000); - } - }); + if (item.platResourceId) { + if (Hls.isSupported()) { + var video = document.getElementById(item.id); + var hls = new Hls(); + videoPoint.getVideoPointUrl(item.platResourceId).then((res) => { + if (res.code === 0) { + hls.loadSource(res.data); + hls.attachMedia(video); + // hls.on(Hls.Events.MANIFEST_PARSED, function () { + // video.play(); + // document.body.addEventListener( + // "click", + // function () { + // video.play(); + // }, + // false + // ); + // }); + setTimeout(() => { + video.play(); + }, 2000); + } + }); + } + } else { + this.$message.error("鏆傛棤瑙嗛"); } }, getVideoPointList(data) { let communityId, streetId; if (data) { - communityId = data.parentId; - streetId = data.id; + communityId = data.id; + streetId = data.parentId; } videoPoint .getVideoPointList({ @@ -219,46 +220,50 @@ }); }, create(item) { - const DHWsInstance = DHWs.getInstance(); - this.ws = DHWsInstance; - console.log(this.ws); - this.login(); - // 璋冪敤鍒涘缓鎺т欢鎺ュ彛 - // if (!this.isLogin) { - // this.$message.info('姝e湪鐧婚檰瀹㈡埛绔紝璇风◢绛�......'); - // return false; - // } - this.dialogCreate = true; - setTimeout(() => { - let _this = this; - const params = [ - { - // ctrlType: "realMonitorUI", - ctrlType: "playerWin", - ctrlCode: this.ctrl, - ctrlProperty: { - displayMode: 1, - splitNum: 1, - channelList: [{ channelId: item.code }], + if (item.code) { + const DHWsInstance = DHWs.getInstance(); + this.ws = DHWsInstance; + console.log(this.ws); + this.login(); + // 璋冪敤鍒涘缓鎺т欢鎺ュ彛 + // if (!this.isLogin) { + // this.$message.info('姝e湪鐧婚檰瀹㈡埛绔紝璇风◢绛�......'); + // return false; + // } + this.dialogCreate = true; + setTimeout(() => { + let _this = this; + const params = [ + { + // ctrlType: "realMonitorUI", + ctrlType: "playerWin", + ctrlCode: this.ctrl, + ctrlProperty: { + displayMode: 1, + splitNum: 1, + channelList: [{ channelId: item.code }], + }, + visible: true, + domId: this.domId, }, - visible: true, - domId: this.domId, - }, - ]; - this.setPos(); - _this.ws - .createCtrl(params) - .then((res) => { - this.$message.success("鍒涘缓鎴愬姛"); - console.log("res", res); - }) - .catch((e) => { - console.log("error;", e); + ]; + this.setPos(); + _this.ws + .createCtrl(params) + .then((res) => { + this.$message.success("鍒涘缓鎴愬姛"); + console.log("res", res); + }) + .catch((e) => { + console.log("error;", e); + }); + _this.ws.on("createCtrlResult", (res) => { + console.warn(res); }); - _this.ws.on("createCtrlResult", (res) => { - console.warn(res); - }); - }, 1000); + }, 1000); + } else { + this.$message.error("鏆傛棤瑙嗛"); + } }, destroy() { @@ -293,12 +298,23 @@ }; </script> <style lang="scss" scoped> +.video-time-select{ + &::v-deep .el-input__prefix{ + height: auto; + } + +} +.video-body-right{ + padding: 10px; + border: 1px solid #ccc; + margin-left: 5px; +} .button-one { height: 40px; width: 80px; margin-left: 20px; padding: 0; - background-color: #09152f; + // background-color: #09152f; color: rgb(75, 155, 183); border: 1px solid rgb(75, 155, 183); } @@ -307,7 +323,7 @@ height: 40px; width: 80px; padding: 0; - background-color: #09152f; + // background-color: #09152f; color: rgb(75, 155, 183); border: 1px solid rgb(75, 155, 183); } @@ -318,7 +334,7 @@ height: 40px; width: 80px; padding: 0; - background-color: #09152f; + // background-color: #09152f; color: rgb(75, 155, 183); border: 1px solid rgb(75, 155, 183); } @@ -387,23 +403,23 @@ } ::v-deep .el-header { - background-color: #09152f; + // background-color: #09152f; color: #000; line-height: 60px; } -::v-deep .el-aside { - background-color: #09152f; -} +// ::v-deep .el-aside { +// background-color: #09152f; +// } -::v-deep .el-menu { - background-color: #09152f; -} +// ::v-deep .el-menu { + // background-color: #09152f; +// } ::v-deep .el-main, -::v-deep .el-footer { - background-color: #09152f; -} +// ::v-deep .el-footer { +// background-color: #09152f; +// } ::v-deep .el-tree-node__label { line-height: 30px; @@ -413,4 +429,24 @@ .dom1 { margin: 0 auto; } -</style> \ No newline at end of file + +video::-webkit-media-controls-timeline { + display: none; +} + +video::-webkit-media-controls-current-time-display { + display: none; +} + +video::-webkit-media-controls-time-remaining-display { + display: none; +} + +video::-webkit-media-controls-mute-button { + display: none; +} + +video::-webkit-media-controls-toggle-closed-captions-button { + display: none; +} +</style> -- Gitblit v1.8.0