91 lines
1.7 KiB
Vue
91 lines
1.7 KiB
Vue
<template>
|
||
<div>
|
||
<div class="level-title">
|
||
<h1>摄像头名称：{{ info.NAME }}</h1>
|
||
</div>
|
||
<table class="table-ui">
|
||
<tr>
|
||
<td class="bbg-transparent">编码</td>
|
||
<td >{{ info.INDEXCODE }}</td>
|
||
</tr>
|
||
</table>
|
||
<div id="aLiVideoPlayer" class="prism-player"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { requestFN } from '@/utils/request'
|
||
|
||
export default {
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
default() {
|
||
return ''
|
||
}
|
||
},
|
||
type: {
|
||
type: String,
|
||
default() {
|
||
return ''
|
||
}
|
||
},
|
||
gangkou: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
requestUrl: {
|
||
type: String,
|
||
default: '/map/mapPlatformelectronic/getHlsPathById'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
info: {},
|
||
player: null,
|
||
url: ''
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.player && this.player.dispose()
|
||
},
|
||
created() {
|
||
this.showVideo()
|
||
},
|
||
methods: {
|
||
showVideo() {
|
||
requestFN(
|
||
this.requestUrl,
|
||
{
|
||
PLATFORMELECTRONIC_ID: this.id
|
||
}
|
||
).then((res) => {
|
||
this.info = res.pd
|
||
this.$nextTick(() => {
|
||
// eslint-disable-next-line no-undef
|
||
this.player = new Aliplayer({
|
||
'id': 'aLiVideoPlayer',
|
||
'source': res.data.url,
|
||
'width': '100%',
|
||
'height': '380px',
|
||
'autoplay': true,
|
||
'isLive': true,
|
||
'rePlay': false,
|
||
'playsinline': true,
|
||
'preload': true,
|
||
'controlBarVisibility': 'hover',
|
||
'useH5Prism': true
|
||
}, function(player) {
|
||
console.log('The player is created')
|
||
})
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
</style>
|