uni-app video 在动态切换src 全屏下退出会出现异常

uni-app video 在动态切换src 全屏下退出会出现异常

示例代码：

<video  
    autoplay  
    :key="videoRenderKey"  
    :title="'第'+videoListConfig.episodeId +'集'"  
    class="video"  
    id="myVideo"  
    :controls="true"  
    :poster="videoInfo.coverUrl"  
    :src="videoInfo.videoUrl"  
    @timeupdate="onTimeUpdate"  
    @ended="videoPlayEnd"  
></video>  

videoPlayEnd(e) {  
  const currentId = this.videoListConfig.episodeId;  
  const isAsc = this.videoListConfig.sortOrder === 'asc';  
  const sortedList = isAsc ? this.videoListConfig.videoList : [...this.videoListConfig.videoList].reverse();  
  const currentIndex = sortedList.findIndex(item => item.episodeId === currentId);  

  // 计算下一个索引  
  let nextIndex = isAsc ? currentIndex + 1 : currentIndex - 1;  

  // 边界判断：根据升序/倒序使用不同条件  
  const hasNext = isAsc  
      ? nextIndex < sortedList.length  
      : nextIndex >= 0;  

  if (hasNext) {  
    const nextEpisode = sortedList[nextIndex];  
    this.videoInfo.videoUrl = nextEpisode.videoUrl;  
    this.videoListConfig.episodeId = nextEpisode.episodeId;  
    this.historyEpisodeId.push(nextEpisode.episodeId)  
    const groupIndex = Math.floor(nextIndex / 32);  
    this.videoListConfig.currentGroupIndex = groupIndex;  

    this.$nextTick(() => {  
      this.resetProgressTriggers()  
      // const videoCtx = uni.createVideoContext('myVideo', this);  
      // videoCtx.play();  
    });  
  } else {  
    uni.showToast({  
      title: '已经是最后一集了',  
      icon: 'none'  
    });  
  }  
},

操作步骤：

在全屏模式下播放,动态src异常切换后视频异常

预期结果：

正常全屏显示

实际结果：

退出全屏后,整个横向显示

bug描述：

video 播放器在结束播放的时候我动态切换了src视频源,在非全屏状态下正常,在全屏状态下会出现异常显示如图:

产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式 项目创建方式
uniapp/App Mac 5.3.1 (24D70) iOS iOS 16 苹果 13 pro max vue vue3 云端 HBuilderX


更多关于uni-app video 在动态切换src 全屏下退出会出现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video 在动态切换src 全屏下退出会出现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的动态切换视频源时全屏状态处理不当的问题。在全屏模式下切换视频源会导致播放器状态异常，主要是因为全屏状态没有正确重置。

建议解决方案：

  1. 强制退出全屏：在切换视频源前先退出全屏状态
videoPlayEnd(e) {
  const videoCtx = uni.createVideoContext('myVideo', this);
  videoCtx.exitFullScreen();
  
  // 延迟执行切换逻辑
  setTimeout(() => {
    // 原有的切换逻辑
    this.videoInfo.videoUrl = nextEpisode.videoUrl;
    // ...其他代码
  }, 300);
}
  1. 使用key强制重新渲染：在切换视频源时更新key值
this.videoInfo.videoUrl = nextEpisode.videoUrl;
this.videoRenderKey = Date.now(); // 强制重新渲染video组件
  1. 全屏状态检测：在切换前检测并处理全屏状态
const videoCtx = uni.createVideoContext('myVideo', this);
videoCtx.exitFullScreen();

this.$nextTick(() => {
  this.videoInfo.videoUrl = nextEpisode.videoUrl;
  // 等待布局稳定后再尝试重新全屏
  setTimeout(() => {
    videoCtx.requestFullScreen();
  }, 500);
});
回到顶部