uni-app nvue中的视频在全屏后进入后台，在onHide退出全屏后样式错乱

发布于 1周前 作者 itying888 来自 Uni-App

uni-app nvue中的视频在全屏后进入后台，在onHide退出全屏后样式错乱

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

示例代码：

<template>  
    <view>  
        <video :src="src" ref="video"></video>  
    </view>  
</template>  
<script>  
let videoCTX = null;  
export default {  
    data() {  
        return {  
            data: {},  
            src: ''  
        };  
    },  
    onLoad(params) {  
        this.data = params;  
        this.src = decodeURIComponent(this.data.url);  
    },  
    mounted() {  
        videoCTX = this.$refs.video;  
    },  
    onHide() {  
        videoCTX.exitFullScreen();  
    }  
};  
</script>  
<style lang="scss" scoped></style>

操作步骤：

<template>  
    <view>  
        <video :src="src" ref="video"></video>  
    </view>  
</template>  
<script>  
let videoCTX = null;  
export default {  
    data() {  
        return {  
            data: {},  
            src: ''  
        };  
    },  
    onLoad(params) {  
        this.data = params;  
        this.src = decodeURIComponent(this.data.url);  
    },  
    mounted() {  
        videoCTX = this.$refs.video;  
    },  
    onHide() {  
        videoCTX.exitFullScreen();  
    }  
};  
</script>  
<style lang="scss" scoped></style>

预期结果：

进入后是竖屏的样式，手机也是竖屏展示的

实际结果：

进入后是竖屏的样式，手机也是横屏展示的

bug描述：

nvue中的视频在全屏后进入后台  在onHide退出全屏进入后样式错乱，从后台切换回app后样式变为竖屏的样式  但是app还是横屏展示的

Harmonyos Next教程
1 回复

在uni-app中使用nvue开发时，处理视频全屏以及应用进入后台再返回前台的场景确实可能会遇到样式错乱的问题。这通常是由于视图状态没有正确恢复导致的。以下是一个可能的解决方案，通过监听应用的生命周期事件和视频的全屏状态，手动恢复视图状态。

首先，确保你在pages.json中正确配置了nvue页面，并且视频组件使用了video标签。

步骤 1: 监听应用生命周期事件

在nvue页面的脚本部分，使用plus.runtime对象监听应用进入后台和返回前台的事件。

// 在页面的onLoad或created生命周期中添加事件监听
export default {
    onLoad() {
        plus.runtime.onAppHide(() => {
            // 应用进入后台，可以记录当前视频状态
            console.log('App entered background');
            // 例如，记录全屏状态
            this.isFullScreen = this.videoContext.fullscreen;
        });

        plus.runtime.onAppShow(() => {
            // 应用返回前台，根据记录的状态恢复视图
            console.log('App entered foreground');
            if (this.isFullScreen) {
                // 假设这里有一个方法恢复全屏状态或重新初始化视频
                this.restoreFullScreen();
            } else {
                // 恢复非全屏状态的样式
                this.restoreNormalState();
            }
        });
    },
    methods: {
        restoreFullScreen() {
            // 实现恢复全屏的逻辑，可能需要重新触发全屏事件或重新加载视频组件
            // 例如: this.videoContext.requestFullscreen();
        },
        restoreNormalState() {
            // 实现恢复非全屏状态的逻辑，例如重置样式
            // 例如: this.$refs.video.style.width = 'original-width';
        }
    },
    data() {
        return {
            isFullScreen: false, // 用于记录视频是否全屏
            videoContext: null  // 视频上下文或引用
        };
    }
}

步骤 2: 管理视频全屏状态

在视频组件上，你可能需要监听全屏变化事件，并相应地更新isFullScreen状态。

<video 
    ref="video" 
    @fullscreenchange="onFullScreenChange" 
    :src="videoSrc" 
    controls>
</video>

methods: {
    onFullScreenChange(event) {
        this.isFullScreen = event.detail.fullscreen;
    }
}

注意

  • 上述代码是一个简化的示例，实际实现中可能需要更复杂的逻辑来处理各种边界情况。
  • restoreFullScreen和restoreNormalState方法的具体实现取决于你的应用需求和视频组件的具体行为。
  • 确保在适当的生命周期钩子中注册和注销事件监听器，避免内存泄漏。

通过这种方式，你可以在应用从后台返回前台时，根据之前记录的视频全屏状态恢复正确的视图样式。

回到顶部