feat: 对接各个视频数据

src/views/film/after-editing/editing/start.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ImgButton } from '@/components/Button'
+import { Video } from '@/components'
+import { getBackgroundImage, getPublicPath, IMAGE_PATHS } from '@/utils'
+
+const router = useRouter()
+
+const handleBack = () => {
+  router.back()
+}
+
+// 连续剪辑视频 URL（暂时用其他视频代替）
+const continuityVideoUrl = getPublicPath('video/on-site/dygmk_jjcnlks_batch.mp4')
+
+// 视频播放状态
+const videoEnded = ref(false)
+const videoPlaying = ref(false)
+
+// 视频播放完成
+const handleVideoEnded = () => {
+  videoEnded.value = true
+}
+</script>
+
+<template>
+  <div class="relative w-full h-full flex items-center justify-center overflow-hidden">
+    <!-- 背景 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.SHOOTING.BG) }"
+    ></div>
+
+    <!-- 视频播放区域 -->
+    <div class="w-full h-full bg-black/40 backdrop-blur-md rounded-3xl border border-white/20">
+      <Video
+        class="w-full h-full"
+        :src="continuityVideoUrl"
+        v-model="videoPlaying"
+        :muted="false"
+        :volume="1"
+        :controls="true"
+        :hideNativeControls="true"
+        :autoplay="true"
+        :show-center-play-icon="true"
+        @ended="handleVideoEnded"
+      >
+      </Video>
+    </div>
+
+    <!-- 返回按钮 -->
+    <ImgButton
+      class="absolute right-0 top-0 z-20"
+      :image="IMAGE_PATHS.COMPONENTS.BACK"
+      @click="handleBack"
+    />
+  </div>
+</template>