uni-app 使用uni.createVideoContext调用play() pause()都没有效果

uni-app 使用uni.createVideoContext调用play() pause()都没有效果

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

操作步骤：

微信小程序端 获取视频组件 调播放接口 无效果

预期结果：

希望可以正常播放视频

实际结果：

不能播放

bug描述：

btnThumbnailClick(index) {  
    this.currentIndex = index;  
    let videoContext = uni.createVideoContext('video' + this.currentIndex, this); //这里对应的视频id  
    videoContext.play();//播放无效  
},

更多关于uni-app 使用uni.createVideoContext调用play() pause()都没有效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请查看视频的组件的id是否正常,用过change的变化查看一下, 如果不行的话,换个hx的版本试试,不过理论上是没有问题的,所以还是看一下代码这边吧

更多关于uni-app 使用uni.createVideoContext调用play() pause()都没有效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的谢谢

在微信小程序端，uni.createVideoContext 的 play() 和 pause() 方法无效，通常是由于以下原因：

  1. 视频上下文创建时机问题：确保在视频组件渲染完成后再调用 createVideoContext。可以在 onReady 生命周期或视频的 [@ready](/user/ready) 事件中调用。

  2. 视频组件ID不匹配：检查视频组件的 id 是否与 createVideoContext 的第一个参数一致。例如，视频组件 <video id="video0"></video> 对应 uni.createVideoContext('video0', this)。

  3. 作用域问题：在自定义组件中使用时，第二个参数 this 必须指向当前组件实例。如果是在子组件或异步回调中，确保 this 指向正确。

  4. 微信小程序限制：微信小程序要求视频播放必须由用户交互触发（如点击事件）。确保 play() 是在用户点击等交互事件中调用，而不是在页面初始化时自动调用。

  5. 视频源问题：检查视频地址是否有效，支持微信小程序的视频格式（如 mp4）。

修改建议：

  • 将 createVideoContext 的调用移到视频组件的 [@ready](/user/ready) 事件中，并保存上下文实例。
  • 在用户点击事件中直接调用保存的上下文实例的 play() 方法。

示例代码：

<video :id="'video' + index" [@ready](/user/ready)="onVideoReady"></video>

data() {
  return {
    videoContexts: {}
  };
},
methods: {
  onVideoReady(e) {
    const index = e.target.id.replace('video', '');
    this.videoContexts[index] = uni.createVideoContext('video' + index, this);
  },
  btnThumbnailClick(index) {
    const videoContext = this.videoContexts[index];
    if (videoContext) {
      videoContext.play();
    }
  }
}
回到顶部