Commit @001c20a4d49be9cb1d2f3920061e475279c940cc

박정하 05-19

250519 박정하 브라우저 재생 미지원 확장자 호환 버전 적용

@001c20a4d49be9cb1d2f3920061e475279c940cc

fdad3b0

001c20a

client/views/component/player/VideoComponent.vue

--- client/views/component/player/VideoComponent.vue

+++ client/views/component/player/VideoComponent.vue


 <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>
   </div>
 </template>
 <script>
 export default {
-  name: 'VideoPlayer',
+  name: 'VideoComponent',
   props: {
     videoUrl: {
       type: String,
       required: true
+    },
+    fileId: {
+      type: String,
+      default: null
     }
+  },
+  data() {
+    return {
+      hasError: false
+    };
   },
   methods: {
     onError(e) {
       console.error('비디오 로드 중 오류가 발생했습니다:', e);
-      this.$emit('error', e);
+      this.hasError = true;
     }
   }
 };

 <style scoped>
 .video-player {
   width: 100%;
-  margin: 0 auto;
+  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>

fdad3b0

001c20a

client/views/pages/bbsDcryVideo/VideoHistoryDetail.vue

--- client/views/pages/bbsDcryVideo/VideoHistoryDetail.vue

+++ client/views/pages/bbsDcryVideo/VideoHistoryDetail.vue


         </dd>
       </dl>
       <div class="gallery video">
-        <Video-component v-if="findResult.hasOwnProperty('files') && findResult.files.length > 0" :videoUrl="findResult.files[0].filePath" />
+        <Video-component v-if="findResult.hasOwnProperty('files') && findResult.files.length > 0" :videoUrl="findResult.files[findResult.files.length - 1].filePath" :fileId="findResult.files[0].fileId" />
         <img v-else :src="eximg" alt="">
       </div>
     </form>

Add a comment

Open 0
Closed 0

List

...	...	@@ -23,7 +23,7 @@
23	23	</dd>
24	24	</dl>
25	25	<div class="gallery video">
26		- <Video-component v-if="findResult.hasOwnProperty('files') && findResult.files.length > 0" :videoUrl="findResult.files[0].filePath" />
	26	+ <Video-component v-if="findResult.hasOwnProperty('files') && findResult.files.length > 0" :videoUrl="findResult.files[findResult.files.length - 1].filePath" :fileId="findResult.files[0].fileId" />
27	27	<img v-else :src="eximg" alt="">
28	28	</div>
29	29	</form>

...	...	@@ -1,21 +1,35 @@
1	1	<template>
2	2	<div class="video-player">
	3	+ <!-- 재생 오류 시 메시지 -->
	4	+ <div v-if="hasError" class="error-message mb-10">
	5	+ <p>이 비디오 형식은 웹 브라우저에서 직접 재생할 수 없습니다. 다운로드 버튼을 이용해 원본 파일을 다운로드하세요.</p>
	6	+ </div>
	7	+ <!-- 비디오 플레이어 -->
3	8	<video ref="videoPlayer" class="video-element" :src="videoUrl" controls @error="onError"></video>
4	9	</div>
5	10	</template>
6	11	<script>
7	12	export default {
8		- name: 'VideoPlayer',
	13	+ name: 'VideoComponent',
9	14	props: {
10	15	videoUrl: {
11	16	type: String,
12	17	required: true
	18	+ },
	19	+ fileId: {
	20	+ type: String,
	21	+ default: null
13	22	}
	23	+ },
	24	+ data() {
	25	+ return {
	26	+ hasError: false
	27	+ };
14	28	},
15	29	methods: {
16	30	onError(e) {
17	31	console.error('비디오 로드 중 오류가 발생했습니다:', e);
18		- this.$emit('error', e);
	32	+ this.hasError = true;
19	33	}
20	34	}
21	35	};
...	...	@@ -23,11 +37,20 @@
23	37	<style scoped>
24	38	.video-player {
25	39	width: 100%;
26		- margin: 0 auto;
	40	+ position: relative;
27	41	}
28	42
29	43	.video-element {
30	44	width: 100%;
31	45	display: block;
32	46	}
	47	+
	48	+.error-message {
	49	+ background-color: #ffeeee;
	50	+ padding: 10px;
	51	+ margin-top: 10px;
	52	+ border-radius: 4px;
	53	+ text-align: center;
	54	+ font-size: 14px;
	55	+}
33	56	</style> (파일 끝에 줄바꿈 문자 없음)

Delete comment