lucky_shop/components-diy/diy-video.vue

<template>
	<view class="video-container" :style="containerStyle">
		<!-- H5端使用原生video标签 -->
		<!-- #ifdef H5 -->
		<video
			ref="videoRef"
			data-component-name="diy-video"
			class="diy-video h5-video"
			:src="videoUrl"
			:poster="posterUrl"
			:style="videoWarpCss"
			controls
			preload="metadata"
			@loadedmetadata="onVideoLoaded"
			@click="handlerClick(videoUrl)"
		></video>
		<!-- #endif -->

		<!-- 微信小程序端使用uni-app的video组件 -->
		<!-- #ifdef MP-WEIXIN -->
		<video
			ref="videoRef"
			data-component-name="diy-video"
			class="diy-video mp-video"
			:src="videoUrl"
			:poster="posterUrl"
			:style="videoWarpCss"
			controls
			@loadedmetadata="onVideoLoaded"
			@error="onVideoError"
		></video>
		<!-- #endif -->
	</view>
</template>

<script>
// 视频
import DiyMinx from './minx.js'
export default {
	name: 'diy-video',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {
			videoRatio: null, // 视频比例：'landscape'（横屏）或 'portrait'（竖屏）
			videoUrl: '',
			posterUrl: ''
		};
	},
	created() {
		this.initVideoData();
	},
	mixins: [DiyMinx],
	watch: {
		value: {
			immediate: true,
			handler(newVal) {
				if (newVal) {
					this.initVideoData();
				}
			}
		}
	},
	computed: {
		videoWarpCss: function () {
			var obj = '';
			if (this.value && this.value.componentAngle == 'round') {
				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
			}
			return obj;
		},
		// 动态计算容器比例
		containerStyle() {
			let style = '';

			if (this.videoRatio === 'landscape') {
				// 横屏视频：16/9比例
				style += 'aspect-ratio: 16 / 9;';
			} else if (this.videoRatio === 'portrait') {
				// 竖屏视频：9/16比例
				style += 'aspect-ratio: 9 / 16;';
			} else {
				// 未加载完成 → 默认使用竖屏比例
				style += 'aspect-ratio: 9 / 16;';
			}

			return style;
		}
	},
	methods: {
		// 初始化视频数据
		initVideoData() {
			this.videoUrl = this.getVideoUrl();
			this.posterUrl = this.getPosterUrl();
			// H5端：预加载视频获取宽高
			// #ifdef H5
			this.preloadVideoForRatio();
			// #endif
		},

		// 获取视频URL
		getVideoUrl() {
			if (!this.value || !this.value.videoUrl) return '';
			const videoUrl = this.value.videoUrl;
			// 如果是完整的http/https链接，直接使用
			if (videoUrl.indexOf('http://') === 0 || videoUrl.indexOf('https://') === 0) {
				return videoUrl;
			}
			// 否则使用$util.img()处理
			return this.$util.img(videoUrl);
		},

		// 获取封面图URL
		getPosterUrl() {
			if (!this.value || !this.value.imageUrl) return '';
			return this.$util.img(this.value.imageUrl);
		},

		// H5端：预加载视频获取宽高比例
		preloadVideoForRatio() {
			const videoUrl = this.videoUrl;
			if (!videoUrl) return;

			const video = document.createElement('video');
			video.preload = 'metadata';
			video.src = videoUrl;
			video.muted = true;
			video.playsInline = true;

			video.addEventListener('loadedmetadata', () => {
				const width = video.videoWidth;
				const height = video.videoHeight;

				if (width && height) {
					this.videoRatio = width >= height ? 'landscape' : 'portrait';
				}
			});

			video.addEventListener('error', (e) => {
				console.error('H5端预加载视频失败:', e);
			});

			// 触发加载
			video.load();
		},

		// 视频加载完成事件（组件内video标签）
		onVideoLoaded(event) {
			let width = 0;
			let height = 0;

			// #ifdef H5
			if (event && event.target) {
				width = event.target.videoWidth || 0;
				height = event.target.videoHeight || 0;
			}
			// #endif

			// #ifdef MP-WEIXIN
			if (event && event.detail) {
				width = event.detail.width || 0;
				height = event.detail.height || 0;
			}
			// #endif

			if (width && height) {
				this.videoRatio = width >= height ? 'landscape' : 'portrait';
			}
		},

		// 视频播放事件
		onVideoPlay() {
		},

		// 视频暂停事件
		onVideoPause() {
		},

		// 视频错误事件
		onVideoError(event) {
			console.error('视频加载失败:', event);
		},

		async handlerClick(videoUrl) {
			await this.__$emitEvent({
				eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
				}
			})
		}
	}
};
</script>

<style scoped>
.video-container {
	width: 100%;
	position: relative;
	overflow: hidden;
	background-color: #000;
}

/* 基础样式 */
.diy-video {
	width: 100%;
	height: 100%;
	display: block;
}

/* H5端样式 */
/* #ifdef H5 */
.h5-video {
	object-fit: cover;
}
/* #endif */

/* 微信小程序端样式 */
/* #ifdef MP-WEIXIN */
.mp-video {
	width: 100%;
	height: 100%;
}
/* #endif */
</style>