Fix:5381 【商城小程序】使用指南视频默认是横屏全屏播放,如果长度大于宽度的视频,改为竖屏播放

(cherry picked from commit e4f4421799)
This commit is contained in:
linxi
2026-06-26 10:10:17 +08:00
committed by lifizer
parent be6b9d9316
commit d290ab6e8f
@@ -1,6 +1,16 @@
<template> <template>
<view class=""> <view class="">
<video class="video" :show-fullscreen-btn="false" id="myVideo" autoplay :src="curPlayVideoUrl" @error="videoErrorCallback" controls></video> <video
class="video"
:show-fullscreen-btn="false"
:direction="videoDirection"
id="myVideo"
autoplay
:src="curPlayVideoUrl"
@loadedmetadata="handleLoadedMetadata"
@error="videoErrorCallback"
controls
></video>
</view> </view>
</template> </template>
<script> <script>
@@ -15,12 +25,14 @@ export default {
return { return {
curPlayVideoUrl:'', curPlayVideoUrl:'',
isVideoPopupShow:false, isVideoPopupShow:false,
pageKeyId: '' pageKeyId: '',
videoDirection: 90,
hasLoadedMetadata: false,
hasRequestedFullscreen: false
} }
}, },
onReady(res) { onReady(res) {
this.videoContext = uni.createVideoContext('myVideo'); this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen();
}, },
onLoad(options) { onLoad(options) {
if (!options.click) { if (!options.click) {
@@ -32,6 +44,29 @@ export default {
this.pageKeyId = `findVideo_videoId_${id}` this.pageKeyId = `findVideo_videoId_${id}`
}, },
methods: { methods: {
handleLoadedMetadata(e) {
const detail = e.detail || {}
const width = Number(detail.width) || 0
const height = Number(detail.height) || 0
if (height > width && width > 0) {
this.videoDirection = 0
} else {
this.videoDirection = 90
}
this.hasLoadedMetadata = true
this.enterFullScreen()
},
enterFullScreen() {
if (!this.videoContext || !this.hasLoadedMetadata || this.hasRequestedFullscreen) {
return
}
this.hasRequestedFullscreen = true
this.videoContext.requestFullScreen({
direction: this.videoDirection
})
},
videoErrorCallback: function(e) { videoErrorCallback: function(e) {
uni.showModal({ uni.showModal({
content: e.target.errMsg, content: e.target.errMsg,