caimei-applets-caimei/pages/login/components/caimei-video.vue

<template>
    <view class="video" :class="show ? 'video-show' : ''">
        <video v-if="videoObj.cmBrandFiles[0].ossUrl" :src="videoObj.cmBrandFiles[0].ossUrl" autoplay class="videoRef" controls id="videoRef"></video>
        <view style="display: flex;width: 100%;flex-direction: row-reverse; margin-top: 300rpx;" @click="cancel">
            <image
                src="https://static.caimei365.com/app/img/supplier-login/close.png"
                mode=""
                class="iconfont icon-guanbi close"
                :class="show ? 'video-show' : ''"
            ></image>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        videoObj: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            videoContext: null // 播放器上下文
        }
    },
    watch: {},
    mounted() {
        this.videoContext = uni.createVideoContext('videoRef', this)
    },
    methods: {
        cancel() {
            this.videoContext.pause()
            this.$emit('closeClick')
        }
    }
}
</script>

<style lang="scss" scoped>
.video {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: flex-end;
    align-items: center;
    flex-direction: column-reverse;
    z-index: 999;
    position: fixed;
    opacity: 0;
    display: none;
    left: 0;
    top: 0;
    .videoRef {
        width: 80%;
        height: 500rpx;
    }
}
.video-show {
    opacity: 1;
    display: flex !important;
}
.close {
    width: 67rpx;
    height: 67rpx;
    margin-bottom: -30rpx;
    margin-right: 6%;
    z-index: 1;
}
</style>