<template>
  <div class="video-player">
    <video ref="videoPlayer" class="video-element" :src="videoUrl" controls @error="onError"></video>
  </div>
</template>
<script>
export default {
  name: 'VideoPlayer',
  props: {
    videoUrl: {
      type: String,
      required: true
    }
  },
  methods: {
    onError(e) {
      console.error('비디오 로드 중 오류가 발생했습니다:', e);
      this.$emit('error', e);
    }
  }
};
</script>
<style scoped>
.video-player {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.video-element {
  width: 100%;
  display: block;
}
</style>