141 lines
3.4 KiB
Vue
141 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="level-title">
|
|
<h1>视频信息</h1>
|
|
</div>
|
|
|
|
<table class="table-ui">
|
|
<tr>
|
|
<td class="bbg-transparent">视频名称</td>
|
|
<td colspan="3">{{ pd.VIDEONAME }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="bbg-transparent">所属重点工程</td>
|
|
<td>{{ pd.OUTSOURCED_NAME }}</td>
|
|
<td class="bbg-transparent">所属公司</td>
|
|
<td>{{ pd.CORP_NAME }}</td>
|
|
</tr>
|
|
</table>
|
|
<iframe v-if="!pd.PLATFORMVIDEOMANAGEMENT_ID" :src="VIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
|
|
<div v-if="pd.PLATFORMVIDEOMANAGEMENT_ID" id="aLiVideoPlayer" class="prism-player"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestFN } from '@/utils/request'
|
|
import moment from 'moment/moment'
|
|
|
|
export default {
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
},
|
|
type: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
},
|
|
gangkou: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
config: config,
|
|
pd: {
|
|
WORK_OPERATOR_ID: [],
|
|
WORK_OPERATOR_NAME: [],
|
|
WORK_OPERATOR_NUMBER: []
|
|
},
|
|
VIDEOURL: ''
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
// 五分钟关闭视频播放页面定时任务
|
|
start() {
|
|
console.log('定时器开启')
|
|
this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟;
|
|
},
|
|
over() {
|
|
// 定时器手动关闭
|
|
console.log('定时器自动关闭')
|
|
clearInterval(this.timer)
|
|
},
|
|
closeVideoStart() {
|
|
this.dialogVideo = false
|
|
this.dialogVideoHLS = false
|
|
this.dialogVideoBack = false
|
|
this.dialogVideoAll = false
|
|
this.over()
|
|
},
|
|
formatDate(date, format) {
|
|
if (date) {
|
|
return moment(date).format(format)
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
getData() {
|
|
this.$message.warning('单次播放最多五分钟')
|
|
this.start()
|
|
requestFN(
|
|
'/map/keyProject/getById',
|
|
{
|
|
id: this.id,
|
|
TYPE: this.type,
|
|
GANGKOU: this.gangkou
|
|
}
|
|
).then(data => {
|
|
this.pd = data.pd
|
|
console.log(this.pd)
|
|
if (!this.pd.PLATFORMVIDEOMANAGEMENT_ID) {
|
|
console.log(1)
|
|
this.VIDEOURL = this.pd.VIDEOURL
|
|
} else {
|
|
console.log(2)
|
|
requestFN(
|
|
'/platformvideomanagement/getHlsPath',
|
|
{
|
|
INDEXCODE: this.pd.INDEXCODE
|
|
}
|
|
).then((res) => {
|
|
console.log(res)
|
|
this.$nextTick(() => {
|
|
// eslint-disable-next-line no-undef
|
|
this.player = new Aliplayer({
|
|
'id': 'aLiVideoPlayer',
|
|
'source': res.data.url,
|
|
'width': '100%',
|
|
'height': '500px',
|
|
'autoplay': true,
|
|
'isLive': true,
|
|
'rePlay': false,
|
|
'playsinline': true,
|
|
'preload': true,
|
|
'controlBarVisibility': 'hover',
|
|
'useH5Prism': true
|
|
}, function(player) {
|
|
console.log('The player is created')
|
|
})
|
|
})
|
|
}).catch((e) => {
|
|
this.over()
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|