监控页面6个视频播放

guanqb

2022-11-25 9e8c3933869385ddc4ce98bdbe516d9bb408c81e

监控页面6个视频播放

 src/styles/dc/index.scss

@@ -14,7 +14,7 @@
    bottom: 10px !important;
    transform: translate(-50%, 0);
    background-color: $bg-color !important;
    z-index: 99;
    z-index: 97;

}

@@ -26,7 +26,7 @@
    height: auto !important;
    border-radius: 5px !important;
    background: #fff !important;
    z-index: 101 !important;
    z-index: 97 !important;
    background-color: $bg-color !important;


@@ -68,7 +68,7 @@
    color: #fff;
    background: #fff;
    border-radius: 5px;
    z-index: 99;
    z-index: 97;
    background-color: $bg-color !important;


@@ -108,7 +108,7 @@
    color: #fff;
    background: #fff;
    border-radius: 5px;
    z-index: 99;
    z-index: 97;
    background-color: $bg-color !important;
    cursor: pointer;
}
@@ -133,7 +133,7 @@
    color: #fff;
    background: #fff;
    border-radius: 5px;
    z-index: 99;
    z-index: 97;
    background-color: $bg-color !important;
    cursor: pointer;


 src/views/video/region.vue

@@ -86,7 +86,168 @@
            </div>
        </div>
        <div class="right-container">
            <div class="item">1</div>
            <div class="item">
                <div class="select">
                    <el-select
                        size="small"
                        v-model="monitorType1"
                        @change="navClick1"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video
                        id="videoElement1"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item">
                <div class="select">
                    <el-select
                        size="small"
                        v-model="monitorType2"
                        @change="navClick2"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video
                        id="videoElement2"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item">
                <div class="select">
                    <el-select
                        size="small"
                        v-model="monitorType3"
                        @change="navClick3"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video
                        id="videoElement3"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item">
                <div class="select">
                    <el-select
                        size="small"
                        v-model="monitorType4"
                        @change="navClick4"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video
                        id="videoElement4"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item t-left">
                <div class="select">
                    <el-select
                        size="small"
                        v-model="monitorType5"
                        @change="navClick5"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video
                        id="videoElement5"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item t-right">
                <div class="select">
                    <el-select
                        size="small"
                        v-model="monitorType6"
                        @change="navClick6"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                    <video
                        id="videoElement6"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
        </div>

        <el-dialog
@@ -130,7 +291,23 @@
            searchValBoxShow: false,
            boxShow: true,
            flvPlayer: null,
            flvListPlayer: {
                flvPlayer1: null,
                flvPlayer2: null,
                flvPlayer3: null,
                flvPlayer4: null,
                flvPlayer5: null,
                flvPlayer6: null,
            },

            saveRangeList: [],
            monitorOption: [],
            monitorType1: '',
            monitorType2: '',
            monitorType3: '',
            monitorType4: '',
            monitorType5: '',
            monitorType6: '',
        }
    },

@@ -142,6 +319,10 @@
    mounted () {
        this.$parent.$parent.resize('400px', true)
        graphicLayer = new EntityDraw()
        document.querySelector('.right-container').style.width = document.body.offsetWidth - 400 + 'px'
        window.onresize = () => {
            document.querySelector('.right-container').style.width = document.body.offsetWidth - 400 + 'px'
        }
    },

    methods: {
@@ -153,7 +334,94 @@
            getVideoList(1, 10).then(res => {
                this.monitoringList = res.data.data.list
                this.initMonitoringIcon()
                this.getMonitorOption()
            })
        },

        getMonitorOption () {
            this.monitorOption = []
            this.monitoringList.forEach((item, index) => {
                let flvUrl = ''
                this.getDevices(item.deviceId).then(res => {
                    flvUrl = res
                    this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvUrl}` })
                    if (index == this.monitoringList.length - 1) {
                        if (this.monitoringList.length < 6) {
                            this.monitorType1 = this.monitorOption[0].label
                            this.monitorType2 = this.monitorOption[0].label
                            this.monitorType3 = this.monitorOption[0].label
                            this.monitorType4 = this.monitorOption[0].label
                            this.monitorType5 = this.monitorOption[0].label
                            this.monitorType6 = this.monitorOption[0].label
                            for (let i = 0; i < 6; i++) {
                                this.playVideoList(`flvPlayer${i + 1}`, `${this.monitorOption[0].flvUrl}`, `videoElement${i + 1}`)
                            }

                        } else {
                            this.monitorType1 = this.monitorOption[0].label
                            this.monitorType2 = this.monitorOption[1].label
                            this.monitorType3 = this.monitorOption[2].label
                            this.monitorType4 = this.monitorOption[3].label
                            this.monitorType5 = this.monitorOption[4].label
                            this.monitorType6 = this.monitorOption[5].label
                            for (let i = 0; i < 6; i++) {
                                this.playVideoList(`flvPlayer${i + 1}`, `${this.monitorOption[i].flvUrl}`, `videoElement${i + 1}`)
                            }
                        }

                    }

                })

            })
        },

        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
                this.flvListPlayer[flvItemPlayer].unload()
                this.flvListPlayer[flvItemPlayer].detachMediaElement()
                this.flvListPlayer[flvItemPlayer].destroy()
                this.flvListPlayer[flvItemPlayer] = null
            }

            if (flvjs.isSupported() && flvUrl != 'nodata') {
                let videoElement = document.getElementById(videoEleName)
                this.flvListPlayer[flvItemPlayer] = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    url: flvUrl
                })
                this.flvListPlayer[flvItemPlayer].attachMediaElement(videoElement)
                this.flvListPlayer[flvItemPlayer].load()
                this.flvListPlayer[flvItemPlayer].play()
            }
        },

        navClick1 (value) {
            this.playVideoList('flvPlayer1', `${this.monitorOption[value].flvUrl}`, 'videoElement1')

        },
        navClick2 (value) {
            this.playVideoList('flvPlayer2', `${this.monitorOption[value].flvUrl}`, 'videoElement2')

        },
        navClick3 (value) {
            this.playVideoList('flvPlayer3', `${this.monitorOption[value].flvUrl}`, 'videoElement3')

        },
        navClick4 (value) {
            this.playVideoList('flvPlayer4', `${this.monitorOption[value].flvUrl}`, 'videoElement4')

        },
        navClick5 (value) {
            this.playVideoList('flvPlayer5', `${this.monitorOption[value].flvUrl}`, 'videoElement5')

        },
        navClick6 (value) {
            this.playVideoList('flvPlayer6', `${this.monitorOption[value].flvUrl}`, 'videoElement6')

        },

        getRegionSaveList () {
@@ -464,11 +732,36 @@
        }
    }
    .right-container {
        position: relative;
        width: calc(100% - 400px);
        width: 1518px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        z-index: 98;
        display: flex;
        flex-wrap: wrap;
        height: 50%;
        left: 400px;
        .item {
            width: 25%;
            height: 100%;
            background-color: $bg-color;
            .select {
                height: 16%;
                padding-top: 6%;
            }
            .video {
                height: 75%;
                padding: 0 10px;
            }
        }
        .t-left {
            position: absolute;
            bottom: 100%;
            left: 0;
        }
        .t-right {
            position: absolute;
            bottom: 100%;
            right: 0;
        }
    }
}
</style>