Fix:5381 【商城小程序】使用指南视频默认是横屏全屏播放,如果长度大于宽度的视频,改为竖屏播放
(cherry picked from commit e4f4421799)
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user