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

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

操作步骤：

  • 正常播放视频，

预期结果：

  • 希望能正常结束

实际结果：

  • 卡在最后一秒结束不掉

bug描述：

video播放器偶尔会出现卡在最后1s结束不掉。每次点击播放就会播放最后1s。类似视频中展示那样。

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本号 win10
HBuilderX类型 正式
HBuilderX版本 4.29
手机系统 Android
手机系统版本号 Android 15
手机厂商 小米
手机机型 Redmi K50 Ultra
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

169a6fed610ae663d11874ef89282ebb.zip


更多关于uni-app video播放器偶尔会出现卡在最后1s结束不掉的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

感谢反馈，你可以提供vue 版本和单页面的源码方便我测试。可以首先排除设备和视频源的问题，比如你使用官方提供的 demo 中的视频或者其他视频，观察是否可以正常暂停和停止，你反馈的是 红米手机有这个问题，其他安卓设备会这样吗？
提供更多信息，有助于定位和解答你的问题。

更多关于uni-app video播放器偶尔会出现卡在最后1s结束不掉的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是源码。

目前只发现红米是这样

经测试MEIZU 20也是这个问题

回复 8***@qq.com: 我给你视频地址，你试一下官方的 视频是否会这样 https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4

回复 DCloud_UNI_OttoJi: 这个视频源也会这样。

回复 DCloud_UNI_OttoJi: 我把代码清除，只保留播放器也会这样

回复 8***@qq.com: 经过我测试普通的 video 播放视频不会出问题，插件市场搜一搜其他播放器试试吧，看一下是 uniapp 的问题，还是个别真机的问题

回复 DCloud_UNI_OttoJi: 现在的问题是，我判断视频总时长前一秒我强制结束，并且把视频播放时长重置为0。第二次播放的时候，播放中事件中currentTime已经播放完了，但是页面显示的播放时间还远没有到达结束时间。

我下边放个图

播放完了，但是显示的当前播放时间不对

这个问题发现是stop方法的问题，改用pause在使用seek就可以了。

回复 8***@qq.com: 最初反馈的视频最后时间不准，也是因为业务代码导致的吗，目前还有问题吗

回复 DCloud_UNI_OttoJi: 不是。那个解决不掉，我只能用代码去强制再播放完成前一秒重置播放时间。还有这个stop方法也是有问题的。先stop再seek（0）。第二次播放的时候显示的播放时间就不准了。

在处理uni-app中video播放器偶尔卡在最后1秒无法结束的问题时，我们可以通过监听video组件的事件并结合一些逻辑来控制播放器的行为。以下是一个示例代码，展示了如何通过监听ended事件和设置定时器来尝试解决这一问题。

首先，确保你的页面中有uni-app的video组件，并绑定相关事件：

<template>
  <view>
    <video
      id="myVideo"
      src="your-video-url.mp4"
      controls
      @ended="onVideoEnded"
      ref="videoPlayer"
    ></video>
  </view>
</template>

在脚本部分，我们可以定义onVideoEnded方法以及一个用于处理定时器的函数：

<script>
export default {
  data() {
    return {
      endTimer: null, // 用于存储定时器的变量
    };
  },
  methods: {
    onVideoEnded() {
      // 当视频正常结束时触发此方法
      console.log('Video ended normally.');
      
      // 清除可能存在的定时器，防止重复设置
      if (this.endTimer) {
        clearTimeout(this.endTimer);
        this.endTimer = null;
      }
      
      // 设置一个定时器，如果视频在1秒内没有真正结束（比如卡住了），则尝试手动重置播放器
      this.endTimer = setTimeout(() => {
        const videoPlayer = this.$refs.videoPlayer[0]; // 获取video组件的DOM对象
        if (videoPlayer.currentTime === videoPlayer.duration) {
          console.log('Video seems stuck, trying to reset...');
          // 尝试重置播放器，这里可以根据具体需求调整，比如重新加载视频或者暂停后播放一小段再停止
          videoPlayer.pause();
          videoPlayer.currentTime = 0; // 重置播放时间到0
          // 如果需要重新加载视频，可以使用以下方法，但注意这会导致视频从头开始播放
          // videoPlayer.src = videoPlayer.src; // 重新设置视频源以触发重新加载
        }
      }, 1000); // 1秒后检查视频是否真正结束
    },
  },
  onUnload() {
    // 页面卸载时清除定时器，防止内存泄漏
    if (this.endTimer) {
      clearTimeout(this.endTimer);
      this.endTimer = null;
    }
  },
};
</script>

在这个示例中，我们使用了@ended事件来监听视频的自然结束。当视频结束时，我们设置了一个1秒的定时器。如果在这1秒内视频没有真正结束（即当前播放时间仍然等于视频总时长），我们尝试通过暂停视频并重置播放时间来解决问题。这种方法可能不是最优解，但可以作为临时解决方案，具体实现可能需要根据实际项目需求进行调整。

回到顶部