105 lines
2.3 KiB
Vue
105 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
src: string
|
|
type?: 'mp4' | 'webm'
|
|
play?: boolean
|
|
autoplay?: boolean
|
|
muted?: boolean
|
|
loop?: boolean
|
|
playsinline?: boolean
|
|
class?: ClassType
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
type: 'mp4',
|
|
play: false,
|
|
muted: true,
|
|
loop: true,
|
|
playsinline: true,
|
|
})
|
|
|
|
const videoRef = ref<HTMLVideoElement | null>(null)
|
|
let pauseTimeoutId: ReturnType<typeof setTimeout> | null = null
|
|
|
|
// autoplay prop 변경 시 재생/정지 제어
|
|
watch(
|
|
() => props.play,
|
|
shouldPlay => {
|
|
if (!videoRef.value) return
|
|
|
|
// 이전 타이머 정리
|
|
if (pauseTimeoutId) {
|
|
clearTimeout(pauseTimeoutId)
|
|
pauseTimeoutId = null
|
|
}
|
|
|
|
if (shouldPlay) {
|
|
videoRef.value.play().catch(err => {
|
|
console.warn('Video play failed:', err)
|
|
})
|
|
} else {
|
|
pauseTimeoutId = setTimeout(() => {
|
|
if (videoRef.value) {
|
|
videoRef.value.pause()
|
|
videoRef.value.currentTime = 0
|
|
}
|
|
pauseTimeoutId = null
|
|
}, 200)
|
|
}
|
|
}
|
|
)
|
|
|
|
onBeforeUnmount(() => {
|
|
// 타이머 정리
|
|
if (pauseTimeoutId) {
|
|
clearTimeout(pauseTimeoutId)
|
|
pauseTimeoutId = null
|
|
}
|
|
})
|
|
|
|
// src 변경 시 비디오 다시 로드
|
|
watch(
|
|
() => props.src,
|
|
() => {
|
|
if (!videoRef.value) return
|
|
|
|
// 비디오 시간 초기화 및 새 소스 로드
|
|
videoRef.value.currentTime = 0
|
|
videoRef.value.load()
|
|
|
|
// 재생 중이었다면 다시 재생
|
|
if (props.play) {
|
|
nextTick(() => {
|
|
videoRef.value?.play().catch(err => {
|
|
console.warn('Video play failed:', err)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="props.src" :class="['video-box', props.class]">
|
|
<video
|
|
ref="videoRef"
|
|
:autoplay="props.autoplay"
|
|
:muted="props.muted"
|
|
:loop="props.loop"
|
|
:playsinline="props.playsinline"
|
|
>
|
|
<source :src="props.src" :type="`video/${props.type}`" />
|
|
</video>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.video-box {
|
|
@apply overflow-hidden relative rounded-[4px] md:rounded-[8px]
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:border-white after:opacity-10 after:rounded-[4px] after:md:rounded-[8px];
|
|
}
|
|
.video-box video {
|
|
@apply absolute top-0 left-0 w-full h-full object-cover;
|
|
}
|
|
</style>
|