chore:H5视频改比例

components-diy/diy-video.vue

@@ -1,8 +1,32 @@
 <template>
 	<view class="video-container">
-		<video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)"
-			:poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover"
-			@tap="handlerClick(value.videoUrl)"></video>
+		<!-- H5端使用原生video标签 -->
+		<!-- #ifdef H5 -->
+		<video 
+			data-component-name="diy-video" 
+			class="diy-video h5-video" 
+			:src="getVideoUrl()"
+			:poster="$util.img(value.imageUrl)" 
+			:style="videoWarpCss" 
+			controls
+			preload="auto"
+			@click="handlerClick(getVideoUrl())"
+		></video>
+		<!-- #endif -->
+		
+		<!-- 微信小程序端使用uni-app的video组件 -->
+		<!-- #ifdef MP-WEIXIN -->
+		<video 
+			data-component-name="diy-video" 
+			class="diy-video mp-video" 
+			:src="getVideoUrl()"
+			:poster="$util.img(value.imageUrl)" 
+			:style="videoWarpCss" 
+			objectFit="cover"
+			controls
+			@tap="handlerClick(getVideoUrl())"
+		></video>
+		<!-- #endif -->
 	</view>
 </template>
 
@@ -38,6 +62,17 @@ export default {
 		}
 	},
 	methods: {
+		// 获取视频URL，根据格式决定是否使用$util.img()处理
+		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);
+		},
 		async handlerClick(videoUrl) {
 			await this.__$emitEvent({
 				eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
@@ -52,20 +87,47 @@ export default {
 <style scoped>
 .video-container {
 	width: 100%;
-	aspect-ratio: 9/16;
 	position: relative;
+	overflow: hidden;
 }
 
+/* 基础样式 */
 .diy-video {
 	width: 100%;
 	height: 100%;
+}
+
+/* H5端样式 - 横屏 */
+/* #ifdef H5 */
+.video-container {
+	aspect-ratio: 16/9;
+}
+
+.h5-video {
+	display: block;
+	object-fit: cover;
+}
+/* #endif */
+
+/* 微信小程序端样式 - 竖屏 */
+/* #ifdef MP-WEIXIN */
+.video-container {
+	aspect-ratio: 9/16;
+}
+
+.mp-video {
 	position: absolute;
 	top: 0;
 	left: 0;
 }
 
-.diy-video>>>.uni-video-container {
+.mp-video>>>.uni-video-container {
 	background-color: transparent;
 	height: 100%;
 }
+
+.mp-video>>>.uni-video-control {
+	display: flex;
+}
+/* #endif */
 </style>