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

This commit is contained in:
linxi
2026-06-26 10:08:01 +08:00
parent aa686f86ba
commit e4f4421799
@@ -1,6 +1,16 @@
<template>
<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>
</template>
<script>
@@ -15,12 +25,14 @@ export default {
return {
curPlayVideoUrl:'',
isVideoPopupShow:false,
pageKeyId: ''
pageKeyId: '',
videoDirection: 90,
hasLoadedMetadata: false,
hasRequestedFullscreen: false
}
},
onReady(res) {
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen();
},
onLoad(options) {
if (!options.click) {
@@ -32,6 +44,29 @@ export default {
this.pageKeyId = `findVideo_videoId_${id}`
},
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) {
uni.showModal({
content: e.target.errMsg,