uni-app视频播放结束的回调没有生效

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app视频播放结束的回调没有生效

视频播放结束回调未生效

作者大大，视频播放结束的回调好像没有生效：

<view class="video-item">  
  <dom-video-player 
    class="video-player2" 
    ref="domVideoPlayer" 
    :src="i.video.url"  
    poster="i.cover.url" 
    @play="onVideoPlay" 
    @pause="onVideoPause"
    @ended="onVideoEnded" 
    @error="videoErrorCallback" 
    :loop="true" 
    :isLoading="true"  
    autoplay="true" 
  />
</view>

onVideoEnded() {
  console.log('视频播放结束');
  this.clearTimers();
  if (this.finish < 15) {
    this.getWelfareInfo()
  }
}

console.log('视频播放结束'); 并没有触发到这个。


Harmonyos Next教程
2 回复

看了下你代码本身是没什么问题的，那可能就是视频 URL 的问题了哦，你可以用 https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4 这个视频 URL 试试看，是否有视频播放结束的回调，如果有回调说明是你的视频播放器探不到回调事件，如果这个 URL 也没有回调，那可能就是其他问题了，可以在文档底部找到我的联系方式，联系我，可以帮你排查一下问题


在处理 uni-app 中视频播放结束的回调没有生效的问题时，首先需要确保你正确使用了 video 组件及其相关事件。uni-app 的 video 组件提供了 ended 事件，用于监听视频播放结束。

以下是一个简单的示例，展示如何正确使用 video 组件并监听 ended 事件：

<template>
  <view class="container">
    <video
      id="myVideo"
      src="https://www.example.com/path/to/your/video.mp4"
      controls
      @ended="onVideoEnded"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onVideoEnded() {
      console.log('视频播放结束');
      // 在这里添加视频播放结束后的逻辑处理
      // 例如，显示下一个视频，或者显示一个结束提示等
    }
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
video {
  width: 300px; /* 根据需要调整视频大小 */
  height: auto;
}
</style>

在这个示例中，我们使用了 uni-app 的 video 组件，并通过 @ended 属性绑定了 onVideoEnded 方法。当视频播放结束时，onVideoEnded 方法会被调用，输出 “视频播放结束” 到控制台。

如果你发现 ended 事件没有生效，可能有以下几种原因：

  1. 视频源问题：确保视频源是有效的，并且视频可以正常播放。
  2. 浏览器/平台兼容性：不同平台或浏览器可能对 ended 事件的支持有所不同。尝试在不同的设备或模拟器上测试。
  3. 组件状态问题：确保 video 组件在触发 ended 事件时是可见的且处于活动状态。
  4. 事件冒泡与捕获：虽然在这个例子中不太可能是问题所在，但了解事件冒泡和捕获机制有助于调试复杂的事件处理逻辑。

如果以上都确认无误，但问题依旧存在，可以考虑查看 uni-app 的官方文档或社区，看看是否有其他人遇到并解决了相同的问题。此外，确保你的 uni-app 版本是最新的，因为新版本中可能已经修复了相关的问题。

回到顶部