Files
super_video/src/views/skill/video.vue
T

44 lines
928 B
Vue

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ImgButton from '@/components/Button/ImgButton.vue'
import { IMAGE_PATHS } from '@/utils'
import six from '/video/xinshou_jiuzhonggoutufa.mp4'
const router = useRouter()
const videoRef = ref()
const handleClose = () => {
router.back()
}
const handlePlay = () => {
if (!videoRef.value) return
videoRef.value.muted = false
videoRef.value.volume = 1
}
</script>
<template>
<div class="w-full h-full relative bg-white/10" @click="handlePlay">
<!-- 返回 -->
<ImgButton
class="absolute right-0 top-0 z-10"
:image="IMAGE_PATHS.COMPONENTS.BACK"
@click="handleClose"
/>
<video ref="videoRef" :src="six" controls></video>
</div>
</template>
<style scoped>
video {
width: 100%;
height: 100%;
/* 核心:保持视频比例,多余部分被裁剪 */
object-fit: cover;
}
</style>