142 lines
3.7 KiB
Vue
142 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, nextTick, onMounted, ref } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import ImgButton from '@/components/Button/ImgButton.vue'
|
|
import { GuideSteps } from '@/components/Guide'
|
|
import { getStaticImage, IMAGE_PATHS } from '@/utils'
|
|
import second from '/video/Vlog模块_任务取景框_专业剖析_基础景别运用.mp4'
|
|
import third from '/video/Vlog模块_任务取景框_专业剖析_画面构图.mp4'
|
|
import fourth from '/video/Vlog模块_任务取景框_专业剖析_脚本策划.mp4'
|
|
import five from '/video/Vlog模块_任务取景框_专业剖析_动态事件跟拍与抓拍.mp4'
|
|
import six from '/video/Vlog模块_任务取景框_专业剖析_素材导入、剪辑拼接.mp4'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const videoRef = ref()
|
|
const status = ref(false)
|
|
|
|
//引导步骤
|
|
const steps = ref([
|
|
{
|
|
id: 'step1',
|
|
content: '试着用这些方法记录身边的小事，你会发现，原来平凡的日子里有这么多值得捕捉的瞬间。'
|
|
}
|
|
])
|
|
|
|
// 视频列表
|
|
const videoList = [second, third, fourth, five, six]
|
|
const currentVideoIndex = ref(0)
|
|
|
|
//按顺序播放
|
|
const currentVideo = computed(() => videoList[currentVideoIndex.value])
|
|
const handleVideoChange = () => {
|
|
if (currentVideoIndex.value < videoList.length - 1) {
|
|
currentVideoIndex.value++
|
|
} else {
|
|
status.value = true
|
|
steps.value = [
|
|
{
|
|
id: 'step1',
|
|
content: '恭喜你，已完成专业剖析的学习，点击【查看脚本】回顾视频脚本吧!'
|
|
}
|
|
]
|
|
return
|
|
}
|
|
nextTick(() => {
|
|
if (!videoRef.value) return
|
|
videoRef.value.muted = false
|
|
videoRef.value.volume = 1
|
|
videoRef.value.play()
|
|
})
|
|
}
|
|
|
|
const handleClose = () => {
|
|
router.back()
|
|
}
|
|
|
|
const image = computed(() => route.query.image as string)
|
|
const key = computed(() => route.query.key as string)
|
|
|
|
const handleClick = () => {
|
|
if (!videoRef.value) return
|
|
videoRef.value.muted = false
|
|
videoRef.value.volume = 1
|
|
}
|
|
|
|
const handlePlay = () => {
|
|
if (!videoRef.value) return
|
|
videoRef.value.muted = false
|
|
videoRef.value.volume = 1
|
|
}
|
|
|
|
const handleComplete = () => {
|
|
if (key.value === 'profession') {
|
|
router.push({
|
|
name: 'Work',
|
|
query: {
|
|
key: 'work'
|
|
}
|
|
})
|
|
} else {
|
|
router.push({
|
|
name: 'midterm',
|
|
query: {
|
|
key: 'midterm'
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (key.value === 'idea') {
|
|
status.value = true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full relative bg-white/10" @click="handleClick">
|
|
<ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton>
|
|
<ImgButton
|
|
class="absolute right-0 top-0 z-10"
|
|
:image="IMAGE_PATHS.COMPONENTS.BACK"
|
|
@click="handleClose"
|
|
/>
|
|
<div v-if="key === 'vlog'" :src="image">
|
|
<img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
|
|
</div>
|
|
<video
|
|
ref="videoRef"
|
|
v-else-if="key === 'case'"
|
|
src="/video/案例赏析-美食小确幸：桂花酒酿小圆子.mp4"
|
|
controls
|
|
@play="handlePlay"
|
|
></video>
|
|
<!-- 专业剖析 -->
|
|
<video
|
|
ref="videoRef"
|
|
v-else-if="key === 'profession'"
|
|
:src="currentVideo"
|
|
controls
|
|
@play="handlePlay"
|
|
@ended="handleVideoChange"
|
|
></video>
|
|
<div v-else-if="key === 'idea'" :src="image">
|
|
<img :src="getStaticImage('work/思路提点全屏')" alt="" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 引导与高亮 -->
|
|
<GuideSteps v-if="status" :steps="steps" position-offset-y="85%" @complete="handleComplete" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* 核心：保持视频比例，多余部分被裁剪 */
|
|
object-fit: cover;
|
|
}
|
|
</style>
|