<template>
<view class="video-player">
<video id="chatVideo" v-if="src" :controls="controls" :show-center-play-btn="false" :show-fullscreen-btn="false" class="video" :src="src" @fullscreenchange="fullscreenchange"></video>
</view>
</template>
<script>
export default {
data() {
return {
src: '',
videoContext:null,
controls:false
}
},
onReady: function (res) {
//创建并返回 video 上下文 videoContext 对象 https://uniapp.dcloud.io/api/media/video-context?id=createvideocontext
this.videoContext = uni.createVideoContext('chatVideo')
},
onLoad() {
const eventChannel = this.$scope.eventChannel;
eventChannel.on('toVideoPlayer', (data)=> {
this.src = data.content
//如提示chatVideo未找到，请加大延时时间
setTimeout(()=>{
this.videoContext.requestFullScreen({direction:0})
this.videoContext.play()
},50)
})
},
methods: {
//视频进入和退出全屏时触发
fullscreenchange(e) {
if(!e.detail.fullScreen){
this.src = ''
uni.navigateBack({
delta:1
})
}else{
this.controls = true
}
}
}
}
</script>
<style scoped>
.video-player {
background-color: #000000;
flex: 1;
/ 预防video控制属性失效.播放按钮显示并且位置不正确问题 /
align-items: center;
justify-content: center;
}
</style>
