uni-app video开启全屏后canvas无法正常显示

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

uni-app video开启全屏后canvas无法正常显示

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

示例代码：

<video id="bsVideo" :controls="false" style="width: 100%;">
    <canvas style="width: 100%;height: 100px;" canvas-id="bsCanvas" id="bsCanvas"></canvas>
</video>

methods: {  
    play() {  
        const videoContext = uni.createVideoContext('bsVideo', this);  
        videoContext.requestFullScreen({direction: 0});  

        var ctx = uni.createCanvasContext('bsCanvas', this)  
        ctx.setFillStyle('red')  
        ctx.fillRect(10, 10, 150, 75)  
        ctx.draw()  
    }  
}

Harmonyos Next教程
2 回复

解决方案：使用条件编译，直接用新版微信小程序canvas 2d接口可以解决，与同层渲染有关，等待uniapp接口适配


在uni-app中，当你使用<video>组件开启全屏后，可能会遇到<canvas>组件无法正常显示的问题。这通常是由于全屏视频播放时页面布局和层级发生了变化导致的。下面是一个简单的示例代码，展示了如何在uni-app中处理这种情况，以确保<canvas>组件在全屏视频播放时仍然可以正常显示。

首先，确保你的uni-app项目中已经正确引入了<video>和<canvas>组件。以下是一个基本的页面结构示例：

<template>
  <view class="container">
    <button @click="toggleFullScreen">Toggle FullScreen</button>
    <video
      id="myVideo"
      src="your-video-url.mp4"
      controls
      ref="video"
      @fullscreenchange="handleFullScreenChange"
    ></video>
    <canvas canvas-id="myCanvas" style="position: absolute; top: 0; left: 0;"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFullScreen: false,
    };
  },
  methods: {
    toggleFullScreen() {
      const video = this.$refs.video[0].nativeElement;
      if (!this.isFullScreen) {
        video.requestFullscreen();
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
      this.isFullScreen = !this.isFullScreen;
    },
    handleFullScreenChange() {
      // Adjust canvas size and position when fullscreen status changes
      const canvas = uni.createCanvasContext('myCanvas');
      const systemInfo = uni.getSystemInfoSync();
      const windowWidth = systemInfo.windowWidth;
      const windowHeight = systemInfo.windowHeight;
      
      canvas.setCanvasSize(windowWidth, windowHeight);
      // Draw something on canvas for demonstration
      canvas.setFillStyle('red');
      canvas.fillRect(0, 0, windowWidth, windowHeight);
      canvas.draw();
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

在这个示例中，我们创建了一个按钮来控制视频的全屏显示，同时通过监听fullscreenchange事件来调整<canvas>的大小和位置。当视频进入或退出全屏模式时，handleFullScreenChange方法会被触发，它使用uni.createCanvasContext来获取canvas的上下文，并设置canvas的大小为当前窗口的宽度和高度，然后绘制一个红色的矩形作为示例。

请注意，这里使用了uni.getSystemInfoSync来获取系统信息，确保canvas的大小与当前窗口大小匹配。此外，由于全屏状态可能会受到设备或浏览器的影响，因此在实际应用中可能需要对不同情况进行额外的处理。

回到顶部