uni-app 一款能走自定义video播放器进度的插件

针对你提到的uni-app中需要一款能自定义video播放器进度的插件的需求，我们可以利用uni-app的组件扩展能力，结合JavaScript来控制video组件的播放进度。下面是一个简单的示例，展示了如何实现自定义video播放器进度控制。

首先，确保你的uni-app项目中已经包含了<video>组件。然后，你可以创建一个自定义的video播放器组件，并添加进度条来控制播放进度。

1. 创建自定义组件 CustomVideoPlayer.vue

<template>
  <view class="container">
    <video
      id="video"
      :src="videoSrc"
      controls
      @timeupdate="onTimeUpdate"
    ></video>
    <slider
      v-model="currentTime"
      :min="0"
      :max="duration"
      @change="onSliderChange"
    ></slider>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://www.example.com/path/to/your/video.mp4',
      currentTime: 0,
      duration: 0,
    };
  },
  methods: {
    onTimeUpdate(event) {
      this.currentTime = event.detail.currentTime;
      this.duration = event.detail.duration;
    },
    onSliderChange(event) {
      const video = this.$refs.video;
      video.currentTime = event.detail.value;
    },
  },
  mounted() {
    const video = this.$refs.video;
    video.addEventListener('loadedmetadata', () => {
      this.duration = video.duration;
    });
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
video {
  width: 100%;
  max-width: 600px;
}
slider {
  width: 80%;
  margin-top: 20px;
}
</style>

2. 使用自定义组件

在你的页面中使用这个自定义组件，例如 index.vue：

<template>
  <view>
    <CustomVideoPlayer />
  </view>
</template>

<script>
import CustomVideoPlayer from '@/components/CustomVideoPlayer.vue';

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

说明

• video组件用于播放视频，并绑定timeupdate事件来实时更新当前播放时间。
• slider组件用于显示和调整播放进度，绑定v-model到currentTime，并在变化时更新视频的播放时间。
• 在组件挂载后，监听loadedmetadata事件以获取视频的总时长。

这个示例展示了如何通过uni-app的基础组件和事件绑定来实现自定义的video播放器进度控制。你可以根据需要进一步美化UI或添加更多功能。