109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<el-drawer
|
||
|
|
v-bind="$attrs"
|
||
|
|
v-if="onOpen"
|
||
|
|
v-on="$listeners"
|
||
|
|
@opened="onOpen"
|
||
|
|
@close="onClose"
|
||
|
|
style="padding-left: 20px"
|
||
|
|
>
|
||
|
|
<div class="videoView">
|
||
|
|
<H265Player :url="url0" @on-error="handleOnError" />
|
||
|
|
</div>
|
||
|
|
<div class="videoView">
|
||
|
|
<H265Player :url="url1" @on-error="handleOnError" />
|
||
|
|
</div>
|
||
|
|
<div class="videoView">
|
||
|
|
<H265Player :url="url2" @on-error="handleOnError" />
|
||
|
|
</div>
|
||
|
|
<div class="videoView">
|
||
|
|
<H265Player :url="url3" @on-error="handleOnError" />
|
||
|
|
</div>
|
||
|
|
</el-drawer>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getVideoPassage } from "@/api/video/videoConfig";
|
||
|
|
import H265Player from "vue-h265-player";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "videoPlay",
|
||
|
|
components: {
|
||
|
|
H265Player,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
formData: {
|
||
|
|
videoDvrNumber: String,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
request:
|
||
|
|
"http://111.21.209.230:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
|
||
|
|
url0: "",
|
||
|
|
url1: "",
|
||
|
|
url2: "",
|
||
|
|
url3: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
watch: {
|
||
|
|
formData: {
|
||
|
|
handler(value) {
|
||
|
|
this.formData = value;
|
||
|
|
this.request = this.request.replace(
|
||
|
|
"{{videoDvrNumber}}",
|
||
|
|
this.formData.videoDvrNumber
|
||
|
|
);
|
||
|
|
this.initVideo();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
mounted() {},
|
||
|
|
beforeDestroy() {},
|
||
|
|
methods: {
|
||
|
|
onOpen() {},
|
||
|
|
onClose() {},
|
||
|
|
handleOnError(error) {
|
||
|
|
console.log("error: ", error);
|
||
|
|
},
|
||
|
|
//查询视频通道
|
||
|
|
initVideo() {
|
||
|
|
getVideoPassage(this.formData.videoDvrNumber).then((response) => {
|
||
|
|
let data = response.data;
|
||
|
|
data.forEach((it, idx) => {
|
||
|
|
if (idx == 0) {
|
||
|
|
this.url0 = this.request.replace("{{passage}}", it.passageValue);
|
||
|
|
}
|
||
|
|
if (idx == 1) {
|
||
|
|
this.url1 = this.request.replace("{{passage}}", it.passageValue);
|
||
|
|
}
|
||
|
|
if (idx == 2) {
|
||
|
|
this.url2 = this.request.replace("{{passage}}", it.passageValue);
|
||
|
|
}
|
||
|
|
if (idx == 3) {
|
||
|
|
this.url3 = this.request.replace("{{passage}}", it.passageValue);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import "@/styles/mixin.scss";
|
||
|
|
|
||
|
|
::v-deep .el-drawer__header {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.videoView {
|
||
|
|
color: aliceblue;
|
||
|
|
float: left;
|
||
|
|
width: 50%;
|
||
|
|
height: 50%;
|
||
|
|
}
|
||
|
|
</style>
|