uni-app video 全屏后切换播放暂停 视频会闪动

uni-app video 全屏后切换播放暂停 视频会闪动

示例代码：

<video class="video" :src="videoUrl" :controls="true"  style="width: 750rpx;height: 422rpx"></video>

操作步骤：

播放视频然后全屏视频 点击左下角暂停播放按钮

预期结果：

视频不发生闪动

实际结果：

视频会闪动

bug描述：

video 全屏后切换左下角播放暂停按钮 视频会闪动
请查看附件图片和视频 注意视频上的字幕位置

Image

Image

video.zip


更多关于uni-app video 全屏后切换播放暂停 视频会闪动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

你调试下这个页面，看下是不是暂停图标字体不同导致的。你更换其他视频是正常吗

更多关于uni-app video 全屏后切换播放暂停 视频会闪动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我这里调试会报“已断开与调试服务的连接” 根据提示排查后尚未解决 更换其他视频也是有这个问题

回复 小雨不简单: 提供个复现工程把，我验证一下

回复 DCloud_UNI_OttoJi: 你好 复现工程私发你了

回复 小雨不简单: 你好，你测试下模拟器是否正常，你测试了几台设备，我使用功能模拟器表现正常

这是一个已知的 uni-app video 组件在全屏状态下的渲染问题。当视频全屏后切换播放/暂停时，由于视频播放器在全屏状态下的重新布局和渲染机制，会导致画面短暂闪动。

问题原因：

  1. 全屏切换时视频播放器需要重新初始化渲染层
  2. 播放状态改变触发了视频解码器的重置
  3. 原生视频控件与 uni-app 框架层的同步问题

解决方案：

方案一：使用自定义播放控制

<video 
  class="video" 
  :src="videoUrl" 
  :controls="false"
  @play="onPlay"
  @pause="onPause"
  style="width: 750rpx;height: 422rpx">
</video>
<view class="custom-controls">
  <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
</view>

export default {
  data() {
    return {
      videoContext: null,
      isPlaying: false
    }
  },
  mounted() {
    this.videoContext = uni.createVideoContext('myVideo', this)
  },
  methods: {
    togglePlay() {
      if (this.isPlaying) {
        this.videoContext.pause()
      } else {
        this.videoContext.play()
      }
    },
    onPlay() {
      this.isPlaying = true
    },
    onPause() {
      this.isPlaying = false
    }
  }
}

方案二：添加过渡效果

.video {
  transition: opacity 0.1s ease;
}
回到顶部