Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：微信小程序的视频改为竖屏播放

Browse Source
This commit is contained in:
jinhhanhan
2026-03-24 16:43:00 +08:00
parent 5a46bb8d69
commit ba5fcfaab1
1 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components-diy/diy-video.vue
View File

@@ -1,7 +1,9 @@
<template> <template>
<view class="video-container">
<video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)" <video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)"
:poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover" :poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover"
@tap="handlerClick(value.videoUrl)"></video> @tap="handlerClick(value.videoUrl)"></video>
</view>
</template> </template>
<script> <script>
@@ -48,11 +50,22 @@ export default {
</script> </script>
<style scoped> <style scoped>
video { .video-container {
width: 100%; width: 100%;
aspect-ratio: 9/16;
position: relative;
}
.diy-video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
} }
.diy-video>>>.uni-video-container { .diy-video>>>.uni-video-container {
background-color: transparent; background-color: transparent;
height: 100%;
} }
</style> </style>