qa-regulatory-gwj-vue/src/views/map/dialog/video_play_gate.vue

89 lines
1.7 KiB
Vue

<template>
<div>
<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: '/mkmjGateVideo/goAllVideo'
}
},
data() {
return {
hls: false,
player: null,
url: ''
}
},
beforeDestroy() {
this.player && this.player.dispose()
},
created() {
this.showVideo()
},
methods: {
showVideo() {
requestFN(
this.requestUrl,
{
GATE_VIDEO_ID: this.id
}
).then((data) => {
// for (let i = 0; i < data.videoList.length; i++) {
// if (data.videoList[0].HLSVIDEOURL) {
// this.url = data.videoList[0].GBSVIDEOURL
// this.hls = true
// } else {
this.hls = false
this.$nextTick(() => {
// eslint-disable-next-line no-undef
this.player = new Aliplayer({
'id': 'aLiVideoPlayer',
'source': data.video.HLSVIDEOURL.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')
})
})
// }
// }
})
}
}
}
</script>
<style lang="scss" scoped>
</style>