uni-app中video标签播放完毕后如何通过外部事件触发重新播放

uni-app中video标签播放完毕后如何通过外部事件触发重新播放

请问uniapp中的video标签 播放完毕之后 怎么能通过外部事件触发重新播放

比如说视频播放完毕 弹出一个弹窗 有重新播放 和播放下一个视频的操作 这个有没有办法实现啊

3 回复

https://uniapp.dcloud.net.cn/api/media/video-context?id=createvideocontext
你看一下这个

更多关于uni-app中video标签播放完毕后如何通过外部事件触发重新播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢 后来看到了 一开始只看到标签没看到api

在uni-app中，可以通过监听video组件的ended事件来实现播放完毕后触发外部操作。具体实现方法如下：

  1. 在template中给video组件绑定ended事件：
<video 
  id="myVideo" 
  src="video.mp4" 
  @ended="onVideoEnd"
></video>
  1. 在methods中定义事件处理函数，并显示弹窗：
methods: {
  onVideoEnd() {
    uni.showModal({
      title: '提示',
      content: '视频播放完毕',
      confirmText: '重新播放',
      cancelText: '播放下一个',
      success: (res) => {
        if (res.confirm) {
          this.replayVideo();
        } else {
          this.playNextVideo();
        }
      }
    });
  },
  
  replayVideo() {
    const videoContext = uni.createVideoContext('myVideo');
    videoContext.seek(0);  // 跳转到开头
    videoContext.play();   // 开始播放
  },
  
  playNextVideo() {
    // 播放下一个视频的逻辑
  }
}
回到顶部