uni-app nvue里面video标签加载m3u8视频循环播放时，视频最后一直加载不会重新播放

uni-app nvue里面video标签加载m3u8视频循环播放时，视频最后一直加载不会重新播放

开发环境 版本号 项目创建方式
Windows 10 3.0.7 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：SM-G9750

页面类型：nvue

打包方式：云端

操作步骤：
nvue里面video标签加载m3u8视频，循环播放，视频最后一直加载，不会重新播放
视频地址 http://cdn.hnshengqin.cn/cxI5QogVbL9frEpiZWNMy8nv2GeCm0zX1280_720.m3u8

预期结果：
视频正常循环播放

实际结果：
视频无法循环播放一直加载

bug描述：
nvue里面video标签加载m3u8视频，循环播放，视频最后一直加载，不会重新播放

更多关于uni-app nvue里面video标签加载m3u8视频循环播放时，视频最后一直加载不会重新播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

根本没修复啊2022了，现在最新版都有问题

更多关于uni-app nvue里面video标签加载m3u8视频循环播放时，视频最后一直加载不会重新播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html


试下HX3.1.0版本呢

我这边最新版本才3.0.7

回复 piupiubiu: Alpha版

回复 DCloud_Android_ST: 还是不管用，播放到最后一直加载转圈，不会重新播放

回复 piupiubiu: 嗯 我转给相关同学看下

回复 DCloud_Android_ST: 23年依旧存在这个问题，安卓ios下一直触发播放完成回调，ios目前的方案只能设置手动seek(0.1),安卓seek没用，只能先stop()再play()，非常影响体验，希望尽快解决

问题已确认 稍后版本支持 m3u8重新播放

这个问题解决了吗？

这个问题解决了吗 3.1.13版本还是不行呢 有的m3u8能重复播放 有的最后卡住

2023年9月7号，此问题依然存在。
就是部分m3u8文件，播放结束后，继续重头播放无法播放。

2024年了 还是没解决啊 有啥好方案不

此问题终于解决了 613600010

在uni-app中使用nvue开发时，若遇到video标签加载m3u8视频并设置循环播放时，视频在播放到最后却持续加载而不重新播放的问题，可以通过监听视频结束事件并手动重置视频源来实现循环播放。以下是一个示例代码，展示了如何在nvue中实现这一功能：

<template>
  <div>
    <video
      id="videoPlayer"
      :src="videoSrc"
      controls
      autoplay
      @ended="onVideoEnded"
      style="width: 100%; height: auto;"
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/path/to/your/video.m3u8' // 替换为你的m3u8视频地址
    };
  },
  methods: {
    onVideoEnded() {
      // 视频播放结束时触发此方法
      const videoPlayer = this.$mp.page.selectComponent('#videoPlayer');
      // 重置视频的currentTime为0以重新开始播放
      videoPlayer.seek(0);
      // 手动触发play事件以开始重新播放
      videoPlayer.play();
    }
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

注意事项：

  1. nvue的限制：nvue中使用的是Weex的组件系统，与Vue.js的web组件有所不同，因此某些事件和方法可能会有差异。确保你的uni-app版本支持nvue中的video组件及其事件。
  2. seek方法的兼容性：在某些平台上，seek(0)可能不会立即重置视频状态，可能需要结合其他方法或延迟处理。
  3. 自动播放策略：由于浏览器和操作系统的自动播放策略限制，autoplay属性可能需要在用户交互后才能生效。如果视频没有自动播放，可以考虑在页面加载完成后通过用户操作（如点击按钮）来启动播放。
  4. 错误处理：在实际应用中，建议添加错误处理逻辑，以处理视频加载失败或播放中断的情况。

通过上述代码，当视频播放结束时，会触发onVideoEnded方法，该方法将视频重置到开始位置并重新播放，从而实现循环播放的效果。如果问题依旧存在，可能需要检查m3u8文件的格式或服务器配置是否正确。

回到顶部