<template> <view class="container global-video-box" v-if="showVideoPop"> <view class="video-content"> <video :id="videoPopList.Id" :src="videoPopList.ResourceUrl" :poster="videoPopList.BackgroundImg" enable-play-gesture :custom-cache="false" object-fit="contain" show-mute-btn @ended="handleVideoEnd" @timeupdate="handleVideoTimeUpdate" ></video> <view class="title text_twoLine"> {{ videoPopList.Title }} </view> </view> <view class="close-icon"> <image @click="handleShow" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/close-icon.png"> </image> </view> </view> </template> <script> import { Home } from "@/config/api"; export default { name: "", filters: {}, components: {}, props: { showVideoPop: { default: false, type: Boolean, }, videoPopList: { default: {}, type: Object, }, }, computed: { curVideoId() { return this.$store.state.videoPlay.playVideoId; }, activityVideoId() { return this.$store.state.videoPlay.playVideoActId; }, }, data() { return { videoContext: null, curVideoTime: 0, }; }, watch: { showVideoPop: { handler(newVal) { if (newVal) { setTimeout(() => { this.handelVideoPlayChild(); }, 300); } }, }, }, created() {}, mounted() {}, methods: { //视频的播放事件 handelVideoPlayChild() { this.videoContext = wx.createVideoContext(this.videoPopList.Id.toString(), this); Home.microAideoHistoryAdd({ VideoId: this.videoPopList.ActivityId || this.videoPopList.Id, SourceType: this.videoPopList.ActivityId ? 2 : 1 }); this.curVideoTime = 0; if (this.curVideoId == this.videoPopList.Id || this.activityVideoId == this.videoPopList.ActivityId) { this.curVideoTime = this.$store.state.videoPlay.palyCurrentTime; } this.videoContext.seek(this.curVideoTime); this.videoContext.play(); }, //视频播放结束 handleVideoEnd() { // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常,安卓横屏不恢复竖屏,ios底部tabbar渲染异常 this.curVideoTime = 0; this.$store.commit("videoPlay/palyTimeUpdate", 0); this.videoContext.exitFullScreen(); }, handleVideoTimeUpdate(e) { let time = parseInt(e.detail.currentTime); this.$store.commit("videoPlay/palyTimeUpdate", time); }, handleShow() { this.$parent.showVideoPop = false; }, }, }; </script> <style scoped lang="scss"> .global-video-box { display: flex; height: 100%; position: fixed; width: 100%; top: 0; left: 0; z-index: 111; background-color: rgba(0, 0, 0, 0.7); .video-content { position: absolute; top: 500rpx; left: 50%; transform: translateX(-50%); width: 95%; height: 456rpx; background-color: #fff; z-index: 112; font-size: 28rpx; color: #333333; video { width: 100%; height: 340rpx; } .title { padding: 15rpx 0 0 15rpx; } } .close-icon { position: absolute; width: 95%; height: 48rpx; top: 430rpx; left: 50%; transform: translateX(-50%); z-index: 112; display: flex; justify-content: flex-end; image { height: 48rpx; width: 48rpx; } } } </style>