<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-02-24 09:06:31
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-09 04:13:28
|
* @FilePath: \srs-police-affairs\src\components\playVideo\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div>
|
<el-dialog :title="title" :visible.sync="visibleFlag" :before-close="dialogBeforeClose" :modal="true"
|
:modal-append-to-body="false" :close-on-click-modal="false" class="car-video-box">
|
<video-loading v-show="videoPlayShow"></video-loading>
|
|
<video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
|
style="object-fit: fill"></video>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
|
import flvjs from 'flv.js'
|
import { getDevices } from '@/api/video/index.js'
|
|
export default {
|
name: 'playVideo',
|
|
data () {
|
return {
|
title: '',
|
visibleFlag: false,
|
flvPlayer: null,
|
videoPlayShow: false
|
}
|
},
|
|
methods: {
|
// 设备的视频播放
|
async play (row) {
|
this.videoPlayShow = true
|
|
if (this.flvPlayer != null) {
|
this.flvPlayer.pause()
|
this.flvPlayer.unload()
|
this.flvPlayer.detachMediaElement()
|
this.flvPlayer.destroy()
|
this.flvPlayer = null
|
}
|
|
this.title = row.name
|
this.visibleFlag = true
|
|
let flvUrl = ''
|
|
await this.getDevices(row.channelId).then(res => {
|
flvUrl = res
|
})
|
|
if (typeof flvUrl === 'object') {
|
this.$message.error(flvUrl.msg)
|
this.visibleFlag = false
|
return
|
}
|
|
|
if (flvjs.isSupported()) {
|
this.$nextTick(() => {
|
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.videoPlayShow = false
|
this.flvPlayer.play()
|
})
|
}
|
},
|
|
async getDevices (channelId) {
|
let flvAddress = ''
|
|
await getDevices(channelId).then(res => {
|
if ('data' in res.data) {
|
flvAddress = res.data.data.flv
|
} else {
|
flvAddress = res.data
|
}
|
})
|
|
return flvAddress
|
},
|
|
dialogBeforeClose () {
|
this.visibleFlag = false
|
},
|
},
|
|
destroyed () {
|
if (this.flvPlayer != null) {
|
this.flvPlayer.pause()
|
this.flvPlayer.unload()
|
this.flvPlayer.detachMediaElement()
|
this.flvPlayer.destroy()
|
this.flvPlayer = null
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
