| | |
| | | left: 50px; |
| | | " |
| | | > |
| | | {{ item.name }}{{ item.community }} |
| | | {{ item.community }}-{{ item.name }} |
| | | </div> |
| | | <video |
| | | :id="item.id" |
| | |
| | | preload="auto" |
| | | width="400px" |
| | | height="300px" |
| | | :src="item.urlAddress" |
| | | type="video/mp4" |
| | | ></video> |
| | | <div class="button-div"> |
| | |
| | | <el-dialog |
| | | :visible.sync="dialogCreate" |
| | | title="查看视频" |
| | | width="80%" |
| | | v-show="dialogCreate" |
| | | :before-close="handleClose2" |
| | | > |
| | |
| | | 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) { |
| | |
| | | }); |
| | | }, |
| | | create(item) { |
| | | const DHWsInstance = DHWs.getInstance(); |
| | | this.ws = DHWsInstance; |
| | | console.log(this.ws); |
| | | this.login(); |
| | | // 调用创建控件接口 |
| | | // if (!this.isLogin) { |
| | | // this.$message.info('正在登陆客户端,请稍等......'); |
| | | // 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('正在登陆客户端,请稍等......'); |
| | | // 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() { |
| | |
| | | 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); |
| | | } |
| | |
| | | height: 40px; |
| | | width: 80px; |
| | | padding: 0; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | color: rgb(75, 155, 183); |
| | | border: 1px solid rgb(75, 155, 183); |
| | | } |
| | |
| | | height: 40px; |
| | | width: 80px; |
| | | padding: 0; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | color: rgb(75, 155, 183); |
| | | border: 1px solid rgb(75, 155, 183); |
| | | } |
| | |
| | | } |
| | | |
| | | ::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; |
| | |
| | | .dom1 { |
| | | margin: 0 auto; |
| | | } |
| | | |
| | | 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> |