106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template>
|
|
<div class="video-player">
|
|
<image :src="coverImageUrl" class="video-cover" style="width: 100%; height:100%;" />
|
|
<CxAudioPlayer
|
|
v-if="list.length > 0"
|
|
:list="list"
|
|
:autoplays="true"
|
|
style="
|
|
display: flex; align-items: center; justify-content: center;
|
|
position: absolute; left: 0; top: 0;
|
|
width: 100%; height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mainClient } from '@/api/clients';
|
|
import CxAudioPlayer from './cx-audio-play/cx-audio-play.vue'
|
|
export default {
|
|
props: {
|
|
currentVideo: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
coverImageUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
http: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
},
|
|
components: {
|
|
CxAudioPlayer
|
|
},
|
|
watch: {
|
|
currentVideo: {
|
|
handler(newVal, oldVal) {
|
|
if (!newVal || !newVal.id) return
|
|
this.fetchRealAudioUrl(newVal)
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isfresh: false,
|
|
screenLoading: false,
|
|
isFullScreen: false,
|
|
changeVideoLock: false,
|
|
secondCountDown: 10,
|
|
list: []
|
|
}
|
|
},
|
|
methods: {
|
|
async fetchRealAudioUrl(videoInfo) {
|
|
if (!videoInfo) return
|
|
const data = { ...videoInfo }
|
|
try {
|
|
const res = await mainClient.request({
|
|
url: 'sociology/course/checkVideo',
|
|
method: 'POST',
|
|
data,
|
|
header: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
console.log('获取播放凭证666',JSON.stringify(res.video));
|
|
const real = res && res.video ? res.video : null
|
|
if (!real) {
|
|
this.list = []
|
|
return
|
|
}
|
|
const src = real.videoUrl || real.m3u8Url || real.source || ''
|
|
if (!src) {
|
|
|
|
this.list = []
|
|
return
|
|
}
|
|
this.list = [{ recorPath: src }]
|
|
} catch (e) {
|
|
this.list = []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.video-player {
|
|
position: relative;
|
|
height: 400rpx;
|
|
width: 100%;
|
|
|
|
.player {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
}
|
|
</style>
|