1、视频播放按配置暂停功能

src/views/AIDevelop.vue

@@ -59,8 +59,13 @@
       </div>
     </div>
     <div class="box-2">
-      <video class="full-box-video" controls>
-        <source src="" type="video/mp4">
+      <video
+        class="full-box-video"
+        @timeupdate="handleTimeUpdate"
+        controls
+        ref="videoRef"
+      >
+        <source :src="videoSrc" type="video/mp4">
         您的浏览器不支持视频播放。
       </video>
     </div>
@@ -68,11 +73,11 @@
 </template>
 
 <script setup>
-import { ref,onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { ArrowDown, ArrowRightBold } from '@element-plus/icons-vue'
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
-import { valueEquals } from 'element-plus'
+import firstLessonVideo from '@/assets/第一课.mp4'
+
 const router = useRouter() // 获取当前路由对象
 // 搜索框
 const SearchInput = ref('')
@@ -110,6 +115,31 @@ const classTitles = [
     '趣味实操',
     '课程总结'
 ]
+
+//=====视频播放暂停
+//视频路径
+const videoSrc = ref(firstLessonVideo)
+
+// 视频 ref
+const videoRef = ref(null)
+// 定义需要暂停的时间点（单位：秒）
+const pauseTimes = ref([2, 6, 11])
+// 记录已经暂停过的时间点索引
+const pausedIndices = ref([])
+
+// 处理视频时间更新事件
+const handleTimeUpdate = () => {
+  if (!videoRef.value) return
+
+  const currentTime = videoRef.value.currentTime
+  pauseTimes.value.forEach((time, index) => {
+    // 检查是否到达时间点且还未暂停过
+    if (currentTime >= time && !pausedIndices.value.includes(index)) {
+      videoRef.value.pause()
+      pausedIndices.value.push(index)
+    }
+  })
+}
 </script>
 
 <style scoped lang="scss">