在 uni-app 中实现类似抖音原生小程序视频播放器进度条功能，特别是针对 m3u8 格式的视频，可以通过自定义组件和事件监听来实现。以下是一个简化的代码示例，展示如何实现视频进度条功能。

首先，确保你已经在项目中集成了视频播放器组件。uni-app 提供了 <video> 组件，可以用于播放视频。

1. 创建自定义组件 video-player.vue

<template>
  <view class="container">
    <video
      id="video"
      :src="src"
      controls
      @timeupdate="updateTime"
      @seeked="seeked"
    ></video>
    <slider
      v-model="currentTime"
      :min="0"
      :max="duration"
      @change="seek"
      class="progress-slider"
    ></slider>
  </view>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      currentTime: 0,
      duration: 0,
    };
  },
  methods: {
    updateTime(event) {
      this.currentTime = event.detail.currentTime;
      this.duration = event.detail.duration;
    },
    seek(event) {
      const video = this.$refs.video;
      video.currentTime = event.detail.value;
    },
    seeked() {
      // 处理seek完成后的逻辑，如果需要
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 300px; /* 根据需要调整 */
}
.progress-slider {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
}
</style>

2. 在页面中使用自定义组件

<template>
  <view>
    <video-player src="https://example.com/path/to/your/video.m3u8"></video-player>
  </view>
</template>

<script>
import VideoPlayer from '@/components/video-player.vue';

export default {
  components: {
    VideoPlayer,
  },
};
</script>

3. 注意事项

• 确保 video 组件的 controls 属性开启，以便用户可以通过默认控件控制播放。
• 使用 <slider> 组件实现进度条，并绑定到视频播放器的当前时间和总时长。
• timeupdate 事件用于实时更新进度条，seek 方法用于用户拖动进度条时更新视频播放位置。
• 根据实际需求调整样式和布局，确保进度条在视频播放器下方正确显示。

以上代码提供了一个基本框架，你可以根据具体需求进一步丰富功能，比如添加缓冲进度条、播放/暂停按钮等。