uni-app中video播放器偶尔会出现卡在最后1s结束不掉的问题

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

uni-app中video播放器偶尔会出现卡在最后1s结束不掉的问题

169a6fed610ae663d11874ef89282ebb.zip

1 回复

在uni-app中遇到video播放器偶尔卡在最后1秒结束不掉的问题,可能是由于多种因素导致的,包括视频文件本身的问题、播放器的内部状态管理、或者是事件处理上的瑕疵。下面我将提供一些代码示例,帮助你排查和可能解决这个问题。

首先,确保你使用的是uni-app官方推荐的<video>组件,并且已经正确设置了相关属性。这里是一个基本的<video>组件使用示例:

<template>
  <view>
    <video
      id="myVideo"
      src="path/to/your/video.mp4"
      controls
      autoplay
      @ended="onVideoEnded"
      @timeupdate="onTimeUpdate"
    ></video>
  </view>
</template>

<script>
export default {
  methods: {
    onVideoEnded() {
      console.log('Video ended');
      // 尝试重置视频组件状态
      this.$refs.myVideo.pause();
      this.$refs.myVideo.currentTime = 0;
    },
    onTimeUpdate(event) {
      const currentTime = event.detail.currentTime;
      const duration = event.detail.duration;
      if (Math.abs(currentTime - duration) < 0.1) {
        // 当视频播放时间接近结束时,手动触发结束事件
        this.onVideoEnded();
      }
    }
  },
  mounted() {
    // 获取video组件的引用
    this.$refs.myVideo = this.$mp.page.selectComponent('#myVideo');
  }
};
</script>

在这个示例中,我们做了以下几点尝试解决问题:

  1. 监听@ended事件:在视频正常结束时执行回调,尝试重置视频状态。
  2. 监听@timeupdate事件:实时获取视频播放进度,当播放时间接近视频总时长时(这里设为0.1秒以内),手动触发结束事件回调,尝试重置播放器状态。
  3. 重置视频状态:在onVideoEnded方法中,调用pause()方法暂停视频,并将currentTime重置为0。

注意,这里的this.$refs.myVideo是通过selectComponent方法获取的video组件实例,这要求你在<video>标签上添加ref="myVideo"(但在uni-app中,直接在template中使用ref可能不生效,因此这里使用了id并通过selectComponent获取)。然而,uni-app官方文档中推荐使用this.$mp.page.selectComponent的方式在H5端可能不适用,具体需根据实际情况调整。

此外,确保你的视频文件没有损坏,并且服务器支持Range请求,以便视频可以流畅播放到最后。如果问题依然存在,可能需要进一步检查视频文件的编码格式或考虑使用第三方视频播放器插件。

回到顶部