gypsy-crm-frontend-vu/components/cwg-video-player.vue

<template>
    <view class="video-section">
        <view class="video-title">{{ t('PersonalManagement.KYCVerify.VideoTitle') }}</view>
        <view class="video-wrapper" :style="wrapperStyle">
            <iframe :src="videoUrl" class="demo-video" @load="onVideoLoad" @error="onVideoError" />
        </view>
    </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'

const props = defineProps({
    videoUrl: {
        type: String,
        required: true
    },
    aspectRatio: {
        type: Number,
        default: 16 / 9 // 默认16:9比例
    }
})

const wrapperStyle = computed(() => {
    return {
        width: '100%',
        position: 'relative',
        paddingBottom: `${(1 / props.aspectRatio) * 100}%`, // 根据宽高比计算padding
        backgroundColor: '#000',
        overflow: 'hidden'
    }
})

const onVideoLoad = () => {
    console.log('视频加载成功')
}

const onVideoError = (err) => {
    console.error('视频加载失败', err)
    uni.showToast({
        title: '视频加载失败，请稍后重试',
        icon: 'none'
    })
}
</script>

<style lang="scss" scoped>
.video-section {
    margin-top: 40rpx;

    .video-title {
        font-size: 28rpx;
        font-weight: 600;
        color: var(--bs-heading-color);
        margin-bottom: 20rpx;
        padding-left: 20rpx;
    }

    .video-wrapper {
        position: relative;
        width: 100%;
        border-radius: 16rpx;
        overflow: hidden;
        background: #000;

        .demo-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            background: #000;
        }

        web-view {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            background: #000;
        }
    }
}
</style>