更新：课程视频播放改成原生video组件

components/video-player/components/ProgressBar.vue

@@ -0,0 +1,183 @@
+<template>
+  <view class="progress-bar-container">
+    <view
+      class="progress-bar"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+      @click="handleClick"
+    >
+      <!-- 背景轨道 -->
+      <view class="track"></view>
+
+      <!-- 已播放进度 -->
+      <view class="played" :style="{ width: playedPercent + '%' }"></view>
+
+      <!-- 拖动滑块 -->
+      <view class="thumb" :style="{ left: playedPercent + '%' }"></view>
+
+      <!-- 时间提示 -->
+      <view
+        v-if="showTimeTooltip"
+        class="time-tooltip"
+        :style="{ left: tooltipPosition + '%' }"
+      >
+        {{ formatTime(tooltipTime) }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  current: number
+  duration: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  current: 0,
+  duration: 0
+})
+
+const emit = defineEmits<{
+  seek: [time: number]
+}>()
+
+const isDragging = ref(false)
+const showTimeTooltip = ref(false)
+const tooltipPosition = ref(0)
+const tooltipTime = ref(0)
+const progressBarWidth = ref(0)
+
+const playedPercent = computed(() => {
+  if (!props.duration) return 0
+  return (props.current / props.duration) * 100
+})
+
+const formatTime = (seconds: number): string => {
+  if (!seconds || isNaN(seconds)) return '00:00'
+
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+const handleTouchStart = (e: any) => {
+  isDragging.value = true
+  showTimeTooltip.value = true
+
+  // 获取进度条宽度
+  const query = uni.createSelectorQuery()
+  query.select('.progress-bar').boundingClientRect()
+  query.exec((res) => {
+    if (res[0]) {
+      progressBarWidth.value = res[0].width
+    }
+  })
+}
+
+const handleTouchMove = (e: any) => {
+  if (!isDragging.value || !progressBarWidth.value) return
+
+  const touch = e.touches[0]
+  const query = uni.createSelectorQuery()
+  query.select('.progress-bar').boundingClientRect()
+  query.exec((res) => {
+    if (res[0]) {
+      const rect = res[0]
+      const offsetX = touch.clientX - rect.left
+      const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100))
+
+      tooltipPosition.value = percent
+      tooltipTime.value = (percent / 100) * props.duration
+    }
+  })
+}
+
+const handleTouchEnd = (e: any) => {
+  if (!isDragging.value) return
+
+  isDragging.value = false
+  showTimeTooltip.value = false
+
+  // 发送 seek 事件
+  emit('seek', tooltipTime.value)
+}
+
+const handleClick = (e: any) => {
+  const query = uni.createSelectorQuery()
+  query.select('.progress-bar').boundingClientRect()
+  query.exec((res) => {
+    if (res[0]) {
+      const rect = res[0]
+      const offsetX = e.detail.x - rect.left
+      const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100))
+      const time = (percent / 100) * props.duration
+
+      emit('seek', time)
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.progress-bar-container {
+  width: 100%;
+  padding: 10rpx 0;
+}
+
+.progress-bar {
+  position: relative;
+  width: 100%;
+  height: 6rpx;
+  cursor: pointer;
+}
+
+.track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 3rpx;
+}
+
+.played {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: #1989fa;
+  border-radius: 3rpx;
+  transition: width 0.1s;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 24rpx;
+  height: 24rpx;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+  transition: left 0.1s;
+}
+
+.time-tooltip {
+  position: absolute;
+  bottom: 30rpx;
+  transform: translateX(-50%);
+  padding: 8rpx 16rpx;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 24rpx;
+  border-radius: 8rpx;
+  white-space: nowrap;
+  pointer-events: none;
+}
+</style>