uni-app video标签在视频未加载出来的情况下，使用uni.createVideoContext操作无效

uni-app video标签在视频未加载出来的情况下，使用uni.createVideoContext操作无效

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

操作步骤：

使用uniapp实现类似抖音的功能，加载的视频是云端的视频，需要一定的时间加载视频，如果在视频加载中划走，我会暂停这个视频。
但是实测中已经加载出来的视频确实暂定了，但是未加载出来的视频，暂停无效，会在视频加载完毕后继续播放

预期结果：

使用uniapp实现类似抖音的功能，加载的视频是云端的视频，需要一定的时间加载视频，如果在视频加载中划走，我会暂停这个视频。
但是实测中已经加载出来的视频确实暂定了，但是未加载出来的视频，暂停无效，会在视频加载完毕后继续播放

实际结果：

使用uniapp实现类似抖音的功能，加载的视频是云端的视频，需要一定的时间加载视频，如果在视频加载中划走，我会暂停这个视频。
但是实测中已经加载出来的视频确实暂定了，但是未加载出来的视频，暂停无效，会在视频加载完毕后继续播放

bug描述：

使用uniapp实现类似抖音的功能，加载的视频是云端的视频，需要一定的时间加载视频，如果在视频加载中划走，我会暂停这个视频。
但是实测中已经加载出来的视频确实暂定了，但是未加载出来的视频，暂停无效，会在视频加载完毕后继续播放


更多关于uni-app video标签在视频未加载出来的情况下，使用uni.createVideoContext操作无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video标签在视频未加载出来的情况下，使用uni.createVideoContext操作无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的视频上下文操作时机问题。当视频尚未加载完成时，uni.createVideoContext 可能无法正确获取到有效的视频实例，导致暂停操作失效。

建议通过以下方式解决：

  1. 监听视频加载状态：在视频开始加载前，通过 @loadstart 事件确认视频上下文已准备就绪
<video 
  :src="videoSrc" 
  @loadstart="onVideoLoadStart"
  id="myVideo"
></video>

onVideoLoadStart() {
  this.videoContext = uni.createVideoContext('myVideo')
  // 此时可以安全操作视频上下文
}
  1. 添加加载状态判断：在暂停操作前检查视频是否已加载
pauseVideo() {
  if (this.videoContext && this.isVideoLoaded) {
    this.videoContext.pause()
  }
}
  1. 使用预加载机制：对于云端视频，可以提前创建视频上下文但不设置 src，待视频可播放时再设置源地址
// 预先创建上下文
this.videoContext = uni.createVideoContext('myVideo')
// 视频准备好后再设置src
this.videoSrc = 'your_cloud_video_url'
  1. 结合 ready 事件：利用 [@ready](/user/ready) 事件确保视频组件完全初始化
<video [@ready](/user/ready)="onVideoReady"></video>
回到顶部