uni-app微信小程序video标签全屏后，底部控制栏消失不见，视频也显示异常

uni-app微信小程序video标签全屏后，底部控制栏消失不见，视频也显示异常

项目属性 信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11
HBuilderX类型 正式
HBuilderX版本号 3.8.7
第三方开发者工具版本号 1.06.2301160
基础库版本号 3.1.4
项目创建方式 HBuilderX

操作步骤：

微信小程序video组件全屏后，再次出门视频，视频底部控制栏消失，视频也显示异常

预期结果：

希望官方尽快回复

实际结果：

希望官方尽快回复

bug描述：

<video :src="item.enclosure[0].url" id="myVideo"  style="width: 300px;height: 225px;"  play-btn-position="center"  @fullscreenchange="fullscreenchange"  @play="playFullscreen"  :show-center-play-btn="true" :controls="controls"  :show-play-btn="true"  class="mt-10"></video>  

playFullscreen(){
    this.videoContext = uni.createVideoContext('myVideo',this);
    this.videoContext?.requestFullScreen();
},
fullscreenchange(event){
    console.log('event',event.detail)
    if(event.detail.fullScreen){
        this.videoContext?.play();
        this.showCenterPlayBtn = false;
        this.controls = true;
        this.showPlayBtn = true;
    }else{
        this.videoContext?.pause();
        this.showCenterPlayBtn = true;
        this.controls = true;
        this.showPlayBtn = true;
    }
},

bug视频

bug视频.zip


更多关于uni-app微信小程序video标签全屏后，底部控制栏消失不见，视频也显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这种列表上，可以先放一个背景图或者视频第一帧，再加一个播放按钮，点击播放按钮，才去实际播放视频，负责列表上多个视频播放也是个问题

更多关于uni-app微信小程序video标签全屏后，底部控制栏消失不见，视频也显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是的， 现在就用的这个方法，给忘记了

在 uni-app 中，使用 video 标签在微信小程序中全屏播放时，可能会遇到底部控制栏消失或视频显示异常的问题。这通常是由于微信小程序的 video 组件在全屏模式下的默认行为导致的。以下是一些可能的解决方案：

1. 检查 video 组件的属性

确保 video 组件的属性设置正确，特别是 controls 和 show-fullscreen-btn 属性。

<video 
  src="your-video-url" 
  controls 
  show-fullscreen-btn 
  style="width: 100%; height: 300px;">
</video>
  • controls：是否显示默认播放控件（播放/暂停按钮、播放进度、时间等）。
  • show-fullscreen-btn：是否显示全屏按钮。

2. 使用 fullscreenchange 事件

在全屏状态变化时，可以通过监听 fullscreenchange 事件来处理一些逻辑，比如重新布局或调整样式。

<video 
  src="your-video-url" 
  controls 
  show-fullscreen-btn 
  @fullscreenchange="onFullscreenChange" 
  style="width: 100%; height: 300px;">
</video>

methods: {
  onFullscreenChange(e) {
    if (e.detail.fullScreen) {
      // 全屏时的处理逻辑
      console.log('进入全屏');
    } else {
      // 退出全屏时的处理逻辑
      console.log('退出全屏');
    }
  }
}

3. 调整样式

在全屏模式下，可能需要调整视频的样式以确保其正常显示。可以通过动态修改样式来适应全屏状态。

<video 
  src="your-video-url" 
  controls 
  show-fullscreen-btn 
  :style="videoStyle" 
  @fullscreenchange="onFullscreenChange">
</video>

data() {
  return {
    isFullScreen: false
  };
},
computed: {
  videoStyle() {
    return {
      width: '100%',
      height: this.isFullScreen ? '100vh' : '300px'
    };
  }
},
methods: {
  onFullscreenChange(e) {
    this.isFullScreen = e.detail.fullScreen;
  }
}

4. 使用 cover-view 和 cover-image

如果需要在全屏模式下显示自定义控件，可以使用 cover-view 和 cover-image 组件，这些组件可以在 video 组件全屏时仍然显示。

<video 
  src="your-video-url" 
  controls 
  show-fullscreen-btn 
  style="width: 100%; height: 300px;">
  <cover-view class="custom-controls">
    <cover-image src="/path/to/icon.png" @tap="onControlTap"></cover-image>
  </cover-view>
</video>

5. 检查微信小程序的基础库版本

确保微信小程序的基础库版本是最新的，因为旧版本可能存在一些已知的 video 组件问题。

6. 使用 uni.createVideoContext

如果需要更精细的控制，可以使用 uni.createVideoContext 来创建视频上下文，并通过 API 控制视频的播放、暂停、全屏等操作。

const videoContext = uni.createVideoContext('myVideo');

// 进入全屏
videoContext.requestFullScreen();

// 退出全屏
videoContext.exitFullScreen();
回到顶部