File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="video-player">
<!-- 재생 오류 시 메시지 -->
<div v-if="hasError" class="error-message mb-10">
<p>이 비디오 형식은 웹 브라우저에서 직접 재생할 수 없습니다. 다운로드 버튼을 이용해 원본 파일을 다운로드하세요.</p>
</div>
<!-- 비디오 플레이어 -->
<!-- <video ref="videoPlayer" class="video-element" :src="videoUrl" controls @error="onError"></video> -->
<video ref="videoPlayer" class="video-element" :src="videoUrl" controls controlsList="nodownload" oncontextmenu="return false;" @error="onError">
</video>
</div>
</template>
<script>
export default {
name: 'VideoComponent',
props: {
videoUrl: {
type: String,
required: true
},
fileId: {
type: String,
default: null
}
},
data() {
return {
hasError: false
};
},
methods: {
onError(e) {
console.error('비디오 로드 중 오류가 발생했습니다:', e);
this.hasError = true;
}
}
};
</script>
<style scoped>
.video-player {
width: 100%;
position: relative;
}
.video-element {
width: 100%;
display: block;
}
.error-message {
background-color: #ffeeee;
padding: 10px;
margin-top: 10px;
border-radius: 4px;
text-align: center;
font-size: 14px;
}
</style>