视频loading效果

guanqb

2023-03-03 381bc4cb392981051e10c996de246ed5ee032603

视频loading效果

 src/components/loading/index.vue

@@ -27,6 +27,7 @@
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 1;
}

.loadingSeven {

 src/views/activity/index.vue

@@ -278,6 +278,7 @@
        </div>

        <div class="item video1" v-show="videoShow">
            <video-loading v-show="isShowVideoLoading.video1"></video-loading>
            <div class="select" v-show="isShowSelect.video1">
                <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })" placeholder="请选择"
                    ref="videoSelect1">
@@ -297,6 +298,7 @@
        </div>

        <div class="item video2" v-show="videoShow">
            <video-loading v-show="isShowVideoLoading.video2"></video-loading>
            <div class="select" v-show="isShowSelect.video2">
                <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })" placeholder="请选择"
                    ref="videoSelect2">
@@ -316,6 +318,7 @@
        </div>

        <div class="item video3" v-show="videoShow">
            <video-loading v-show="isShowVideoLoading.video3"></video-loading>
            <div class="select" v-show="isShowSelect.video3">
                <el-select size="small" v-model="monitor.type3" v-show="isShowSelect.video3"
                    @change="((val) => { navClick(val, 3) })" placeholder="请选择" ref="videoSelect3">
@@ -335,6 +338,7 @@
        </div>

        <div class="item video4" v-show="videoShow">
            <video-loading v-show="isShowVideoLoading.video4"></video-loading>
            <div class="select" v-show="isShowSelect.video4">
                <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })" placeholder="请选择"
                    ref="videoSelect4">
@@ -740,6 +744,12 @@
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
            isShowVideoLoading: {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
            },
        }
    },

@@ -2104,6 +2114,7 @@

            if (this.monitorOption[val].item.status == 1) {
                this.isHaveMonitor[`video${args}`] = true
                this.isShowVideoLoading[`video${args}`] = true

                getDevices(this.monitorOption[val].item.channelId).then(res => {
                    let flvAddress = ''
@@ -2113,7 +2124,7 @@
                        flvAddress = 'nodata'
                    }

                    this.playVideoList(`flvPlayer${args}`, `${flvAddress}`, `videoElement${args}`)
                    this.playVideoList(`flvPlayer${args}`, `${flvAddress}`, `videoElement${args}`,`${args}`)
                })

            } else {
@@ -2144,6 +2155,7 @@

                        if (item.status == 1) {
                            this.isHaveMonitor[`video${ind}`] = true
                            this.isShowVideoLoading[`video${ind}`] = true

                            getDevices(item.channelId).then(res => {
                                let flvAddress = ''
@@ -2178,7 +2190,7 @@
            }
        },

        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
        playVideoList (flvItemPlayer, flvUrl, videoEleName,index) {
            console.log('flvUrl', flvUrl)
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
@@ -2189,6 +2201,7 @@
            }

            if (flvjs.isSupported() && flvUrl != 'nodata') {
                this.isShowVideoLoading[`video${index}`] = false
                let videoElement = document.getElementById(videoEleName)
                this.flvListPlayer[flvItemPlayer] = flvjs.createPlayer({
                    type: 'flv',
@@ -2289,7 +2302,7 @@
                                        flvAddress = 'nodata'
                                    }

                                    this.playVideoList(`flvPlayer${ind}`, `${flvAddress}`, `videoElement${ind}`)
                                    this.playVideoList(`flvPlayer${ind}`, `${flvAddress}`, `videoElement${ind}`,`${ind}`)
                                })
                            } else {
                                this.isHaveMonitor[`video${ind}`] = false

 src/views/video/region.vue

@@ -60,6 +60,7 @@
            </div>
        </div>
        <div class="item video1" v-show="isShowVideo.video1">
            <video-loading v-show="isShowVideoLoading.video1"></video-loading>
            <div class="select" v-show="isShowSelect.video1">
                <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })" placeholder="请选择"
                    ref="videoSelect1">
@@ -80,6 +81,7 @@
            <div class="outline" v-show="isShowOutline.video1">设备离线中…</div>
        </div>
        <div class="item video2" v-show="isShowVideo.video2">
            <video-loading v-show="isShowVideoLoading.video2"></video-loading>
            <div class="select" v-show="isShowSelect.video2">
                <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })" placeholder="请选择"
                    ref="videoSelect2">
@@ -100,6 +102,7 @@
            <div class="outline" v-show="isShowOutline.video2">设备离线中…</div>
        </div>
        <div class="item video3" v-show="isShowVideo.video3">
            <video-loading v-show="isShowVideoLoading.video3"></video-loading>
            <div class="select" v-show="isShowSelect.video3">
                <el-select size="small" v-model="monitor.type3" @change="((val) => { navClick(val, 3) })" placeholder="请选择"
                    ref="videoSelect3">
@@ -120,6 +123,7 @@
            <div class="outline" v-show="isShowOutline.video3">设备离线中…</div>
        </div>
        <div class="item video4" v-show="isShowVideo.video4">
            <video-loading v-show="isShowVideoLoading.video4"></video-loading>
            <div class="select" v-show="isShowSelect.video4">
                <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })" placeholder="请选择"
                    ref="videoSelect4">
@@ -140,6 +144,7 @@
            <div class="outline" v-show="isShowOutline.video4">设备离线中…</div>
        </div>
        <div class="item video5" v-show="isShowVideo.video5">
            <video-loading v-show="isShowVideoLoading.video5"></video-loading>
            <div class="select" v-show="isShowSelect.video5">
                <el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })" placeholder="请选择"
                    ref="videoSelect5">
@@ -160,6 +165,7 @@
            <div class="outline" v-show="isShowOutline.video5">设备离线中…</div>
        </div>
        <div class="item video6" v-show="isShowVideo.video6">
            <video-loading v-show="isShowVideoLoading.video6"></video-loading>
            <div class="select" v-show="isShowSelect.video6">
                <el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })" placeholder="请选择"
                    ref="videoSelect6">
@@ -180,6 +186,7 @@
            <div class="outline" v-show="isShowOutline.video6">设备离线中…</div>
        </div>
        <div class="item video7" v-show="isShowVideo.video7">
            <video-loading v-show="isShowVideoLoading.video7"></video-loading>
            <div class="select" v-show="isShowSelect.video7">
                <el-select size="small" v-model="monitor.type7" v-show="isShowSelect.video7"
                    @change="((val) => { navClick(val, 7) })" placeholder="请选择" ref="videoSelect7">
@@ -200,6 +207,7 @@
            <div class="outline" v-show="isShowOutline.video7">设备离线中…</div>
        </div>
        <div class="item video8" v-show="isShowVideo.video8">
            <video-loading v-show="isShowVideoLoading.video8"></video-loading>
            <div class="select" v-show="isShowSelect.video8">
                <el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })" placeholder="请选择"
                    ref="videoSelect8">
@@ -335,6 +343,16 @@
                video7: false,
                video8: false,
            },
            isShowVideoLoading: {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
                video5: false,
                video6: false,
                video7: false,
                video8: false,
            },
            chooseRangeColor: '#FF0000',
            editRangeVisible: false,
            lineWidth: '',
@@ -432,7 +450,7 @@
        //     })
        // },

        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
        playVideoList (flvItemPlayer, flvUrl, videoEleName,index) {
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
                this.flvListPlayer[flvItemPlayer].unload()
@@ -442,6 +460,7 @@
            }

            if (flvjs.isSupported() && flvUrl != 'nodata') {
                this.isShowVideoLoading[`video${index}`] = false
                let videoElement = document.getElementById(videoEleName)
                this.flvListPlayer[flvItemPlayer] = flvjs.createPlayer({
                    type: 'flv',
@@ -463,10 +482,13 @@
            this.monitor[`type${args}`] = this.monitorOption[val].item.name
            if (this.monitorOption[val].item.status == 0) {
                this.isShowOutline[`video${args}`] = true
            }else{
                this.isShowOutline[`video${args}`] = false
                this.isShowVideoLoading[`video${args}`] = true
            }
            this.getDevices(this.monitorOption[val].item.channelId).then(res => {

                this.playVideoList(`flvPlayer${args}`, `${res}`, `videoElement${args}`)
                this.playVideoList(`flvPlayer${args}`, `${res}`, `videoElement${args}`,`${args}`)
            })
        },

@@ -770,10 +792,12 @@
                                this.monitor[`type${ind}`] = item.name
                                if (item.status == 0) {
                                    this.isShowOutline[`video${ind}`] = true
                                }else{
                                    this.isShowVideoLoading[`video${ind}`] = true
                                }

                                this.getDevices(item.channelId).then(res => {
                                    this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                                    this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`,`${ind}`)
                                })
                            }
                        })
@@ -817,7 +841,7 @@
                                }

                                this.getDevices(item.channelId).then(res => {
                                    this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                                    this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`,`${ind}`)
                                })
                            }
                        })