uni-app video组件全屏播放视频时会自动息屏

uni-app video组件全屏播放视频时会自动息屏

开发环境 版本号 项目创建方式
Windows Windows 64位家庭版 HBuilderX
HBuilderX 3.1.4

示例代码：

<template>  
    <div>  
        <video id="myVideo" class="myVideo"  autoplay="true"  :src="src"></video>  
    </div>  
</template>  

<script>  
    export default {  
        props: {  
            src:{  
                type: String,  
                default: "1"  
            }  
        },  
        data() {  
            return{  
                url:''  
            }  
        }  

    }  
</script>

操作步骤：

全屏下会播放一段时间后自动随手机息屏时间自动息屏，

预期结果：

一直播放视频永不息屏

实际结果：

全屏下会播放一段时间后自动随手机息屏时间自动息屏，

bug描述：

video组件 正在全屏播放视频时会自动息屏，播放视频的时候能不能设置为永不息屏，不然看着看着自动息屏了？？


更多关于uni-app video组件全屏播放视频时会自动息屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你可以判断全屏，然后自己设置常亮 退出全屏，取消常亮

更多关于uni-app video组件全屏播放视频时会自动息屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的系统级行为问题。在uni-app中，video组件全屏播放时确实会受到设备自动锁屏策略的影响。

解决方案是使用plus.screen模块来控制屏幕常亮：

export default {
  data() {
    return {
      url: '',
      screen: null
    }
  },
  mounted() {
    // 初始化屏幕控制
    if(uni.plus) {
      this.screen = plus.screen;
    }
  },
  methods: {
    // 视频开始播放时设置常亮
    onPlay() {
      if(this.screen) {
        this.screen.setKeepScreenOn(true);
      }
    },
    // 视频暂停或结束时恢复自动锁屏
    onPause() {
      if(this.screen) {
        this.screen.setKeepScreenOn(false);
      }
    }
  }
}

在video组件中添加事件监听：

<video 
  id="myVideo" 
  class="myVideo"  
  autoplay="true"  
  :src="src"
  [@play](/user/play)="onPlay"
  [@pause](/user/pause)="onPause"
  [@ended](/user/ended)="onPause"
></video>
回到顶部