67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div id="aLiVideoPlayer" class="prism-player"/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
id: {
|
||
|
|
type: String,
|
||
|
|
default() {
|
||
|
|
return ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default() {
|
||
|
|
return ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
hls: false,
|
||
|
|
player: null,
|
||
|
|
url: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
this.player && this.player.dispose()
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
console.info(this.id)
|
||
|
|
this.showVideo()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showVideo() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
this.player = new Aliplayer({
|
||
|
|
'id': 'aLiVideoPlayer',
|
||
|
|
'source': config.ysVideoUrl + '/live/loadmin/38f8c7d91db97445a1f6e0ef5bbd5ae0/' + config.ysVideoDefinition + '/' + this.id + '.m3u8',
|
||
|
|
// 'source': 'http://172.16.11.146:8991/videoApi/live/loadmin/38f8c7d91db97445a1f6e0ef5bbd5ae0/4/MT-CFD-MK-IPC-16216_1.m3u8',
|
||
|
|
'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>
|