首页视频播放的修改

shuishen

2023-01-11 fe6760d3fbc37aa83487be463d4b7ef61a2c96d5

首页视频播放的修改

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-11 10:29:01
 * @LastEditTime: 2023-01-11 10:44:34
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -54,12 +54,6 @@
            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'housingsName'"></map-select>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>

        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
@@ -127,7 +121,9 @@
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger">播放{{ scope }}</el-button>
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
@@ -295,6 +291,13 @@
                暂无数据
            </div>
        </el-dialog>


        <el-dialog :title="dialogEquimentVideoTitle" :modal="false" :visible.sync="dialogEquimentVideoVisible"
            :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box">
            <video src="" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>
    </div>
</template>

@@ -399,6 +402,7 @@

let timer = []

import flvjs from 'flv.js'
import axios from "axios"
import carList from '@/assets/data/car.js'
import phoneList from '@/assets/data/phone.js'
@@ -427,8 +431,6 @@
            monitoringLayerShow: false,
            panoramaLayerShow: false,
            policeSituationLayerShow: false,
            dialogTitle: '',
            dialogVisible: false,
            panoramaTitle: '',
            panoramaVrUrl: '',
            equimentTitle: '',
@@ -480,6 +482,10 @@
            currentPage: 1,
            pagesize: 9,
            equimentPagingTotal: 0,

            // 现有设备视屏播放的
            dialogEquimentVideoTitle: '',
            dialogEquimentVideoVisible: false,

            landDetailArr: [],
            keyPersonDetailArr: [],
@@ -829,18 +835,12 @@
        },

        siteClick (e) {
            this.dialogTitle = e.overlay.attrParams.name
            this.dialogVisible = true

            if (this.$refs.videoElement && this.$refs.videoElement != null) {
                this.$refs.videoElement.currentTime = 0
                this.$refs.videoElement.play()
            }
            this.dialogEquimentVideoTitle = e.overlay.attrParams.name
            this.dialogEquimentVideoVisible = true
        },

        dialogBeforeClose () {
            this.$refs.videoElement.pause()
            this.dialogVisible = false
            this.dialogEquimentVideoVisible = false
        },

        panoramaSiteClick (e) {
@@ -1149,6 +1149,37 @@
            this.equimentVisible = true
        },

        // 设备的视频播放
        async play (row) {
            if (this.flvPlayer != null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }

            this.dialogEquimentVideoTitle = row.name
            this.dialogEquimentVideoVisible = true

            let flvUrl = ''
            await this.getDevices(row.deviceId, row.channelId).then(res => {
                flvUrl = res
            })
            if (flvjs.isSupported() && flvUrl != 'nodata') {
                var videoElement = document.getElementById('videoElement')
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    url: flvUrl
                })
                this.flvPlayer.attachMediaElement(videoElement)
                this.flvPlayer.load()
                this.flvPlayer.play()
            }
        },

        showkeypersondetail (name, arr) {
            this.keyPersonVisible = true
            this.keyPersonTitle = name