feat: 对接各个视频数据

src/views/interview/after-editing/editing.vue

@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import ImgButton from '@/components/Button/ImgButton.vue'
+// import { GuideSteps } from '@/components/Guide'
+import { IMAGE_PATHS } from '@/utils'
+const router = useRouter()
+
+// 导入视频文件
+import videoBasic from '/video/vlog_zhizuobianjiaojing_jichujianji.mp4'
+import videoSoundeffect from '/video/vlog_renwuqujing_yingxiaochuli.mp4'
+import videoPackaging from '/video/vlog_renwuqujing_baozhuang.mp4'
+import videoCopyright from '/video/vlog_renwuqujing_banquanguifan.mp4'
+const videoList = [videoBasic, videoSoundeffect, videoPackaging, videoCopyright]
+
+const videoRef = ref<HTMLVideoElement>()
+const currentVideoIndex = ref(0)
+
+onMounted(() => {
+  // 确保视频元素加载并自动播放
+  if (videoRef.value) {
+    videoRef.value.src = videoList[currentVideoIndex.value]
+    videoRef.value.load()
+
+    // 尝试自动播放
+    const playPromise = videoRef.value.play()
+
+    if (playPromise !== undefined) {
+      playPromise.catch(error => {
+        // 自动播放失败，可能是浏览器策略阻止，需要用户交互
+        console.log('自动播放被阻止:', error)
+      })
+    }
+
+    // 监听视频结束事件
+    videoRef.value.addEventListener('ended', playNextVideo)
+  }
+})
+
+// 播放下一个视频
+const playNextVideo = () => {
+  if (currentVideoIndex.value < videoList.length - 1) {
+    currentVideoIndex.value++
+    if (videoRef.value) {
+      videoRef.value.src = videoList[currentVideoIndex.value]
+      videoRef.value.load()
+
+      // 自动播放下一个视频
+      const playPromise = videoRef.value.play()
+
+      if (playPromise !== undefined) {
+        playPromise.catch(error => {
+          console.log('自动播放被阻止:', error)
+        })
+      }
+    }
+  }
+}
+
+// 监听当前视频索引变化
+watch(currentVideoIndex, newIndex => {
+  if (videoRef.value) {
+    videoRef.value.src = videoList[newIndex]
+    videoRef.value.load()
+  }
+})
+
+const handleClose = () => {
+  router.back()
+}
+</script>
+
+<template>
+  <div>
+    <!--使用动态绑定和ref-->
+    <video
+      ref="videoRef"
+      :src="videoList[currentVideoIndex]"
+      type="video/mp4"
+      controls
+      preload="auto"
+      class="video-player"
+      autoplay
+    ></video>
+    <ImgButton
+      class="absolute right-0 top-0 z-10"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleClose"
+    />
+  </div>
+</template>
+
+<style scoped>
+.video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+</style>