<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>