视频添加历史记录位置

src/components/videopage/VideoPlayer.vue

@@ -13,6 +13,15 @@
             @ended="handleVideoEnded"
             @loadedmetadata="handleLoadedMetadata"
           ></video>
+          <!-- 历史播放位置提示 -->
+          <div 
+            v-if="showHistoryTip" 
+            class="history-tip"
+            :style="{ left: historyTipPosition + '%' }"
+          >
+            <el-icon @click.stop="closeHistoryTip" class="close-icon"><CloseBold /></el-icon>
+            <span @click="goToLastPosition">回到上次播放位置</span>
+          </div>
           <!-- 自定义进度条上的章节要点小圆点 
               :title="marker.title || `章节要点 (${marker.time}s)`" 
           -->
@@ -49,6 +58,7 @@ import { ElMessage } from 'element-plus'
 import { globalState } from '@/utils/globalState.js'
 // 导入图标
 import { saveRecord } from '@/api/personalized/index.js'
+import { CloseBold } from '@element-plus/icons-vue'
 
 
 // 定义props
@@ -81,6 +91,12 @@ const lastPlayProgress = ref(0)
 const targetProgresses = [10, 50, 100]
 // 章节要点标记
 const chapterMarkers = ref([])
+// 历史播放位置提示状态
+const showHistoryTip = ref(false)
+// 上次播放位置时间
+const lastPlayTime = ref(0)
+// 历史播放提示位置百分比
+const historyTipPosition = ref(0)
 
 // 定义节流函数
 const throttle = (fn, delay) => {
@@ -224,13 +240,24 @@ const setLastPlayPosition = () => {
     const savedData = localStorage.getItem(`videoProgress_${props.courseId}`)
     if (savedData) {
       const { currentTime, progress } = JSON.parse(savedData)
-      if (currentTime && !isNaN(currentTime)) {
-        videoRef.value.currentTime = currentTime
+      if (currentTime && !isNaN(currentTime) && currentTime > 0) {
+        // 存储上次播放位置但不自动跳转
+        lastPlayTime.value = currentTime
         lastPlayProgress.value = progress
+        // 计算历史提示位置
+        const duration = videoRef.value.duration
+        historyTipPosition.value = duration > 0 ? (currentTime / duration) * 100 : 0
+        showHistoryTip.value = true
+        
         // 检查是否已有保存的进度点
         if (progress >= 10) savedProgress.value.push(10)
         if (progress >= 50) savedProgress.value.push(50)
         if (progress >= 100) savedProgress.value.push(100)
+        
+        // 5秒后自动隐藏历史位置提示
+        // setTimeout(() => {
+        //   showHistoryTip.value = false
+        // }, 5000)
       }
     }
   } catch (error) {
@@ -238,6 +265,23 @@ const setLastPlayPosition = () => {
   }
 }
 
+// 跳转到上次播放位置
+const goToLastPosition = () => {
+  if (videoRef.value && lastPlayTime.value > 0) {
+    videoRef.value.currentTime = lastPlayTime.value
+    showHistoryTip.value = false
+    // 自动播放视频
+    videoRef.value.play().catch(error => {
+      console.error('自动播放失败:', error)
+    })
+  }
+}
+
+// 关闭历史播放位置提示
+const closeHistoryTip = () => {
+  showHistoryTip.value = false
+}
+
 // 初始化视频播放器
 const initVideoPlayer = () => {
   if (props.contentType !== 'video') return
@@ -444,9 +488,9 @@ onBeforeUnmount(() => {
   font-size: rpx(7);
   cursor: pointer;
   transition: background-color 0.3s;
-  display: flex; // 添加这一行
-  align-items: center; // 添加这一行以确保按钮内文本垂直居中
-  justify-content: center; // 添加这一行以确保按钮内文本水平居中
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
   height: rpx(15);
 }
 
@@ -494,6 +538,51 @@ video::-webkit-media-controls-panel:not([hidden]) ~ .progress-markers {
   height: rpx(6);
 }
 
+/* 历史播放位置提示样式 */
+.history-tip {
+  position: absolute;
+  bottom: rpx(22);
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: rpx(5) rpx(7);
+  border-radius: rpx(4);
+  font-size: rpx(6);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 20;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: rpx(2);
+}
+
+.history-tip .close-icon {
+  cursor: pointer;
+  font-size: rpx(7);
+  transition: color 0.3s ease;
+}
+
+.history-tip .close-icon:hover {
+  color: #ff4d4f;
+}
+
+.history-tip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: rpx(4) solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.5);
+  width: 0;
+  height: 0;
+}
+
+.history-tip:hover {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
 /* 调整视频控件样式以适应我们的自定义标记 */
 video::-webkit-media-controls-timeline {
   margin-bottom: 10px;