Commit @72ee90d5cecb6a9815e1d5f2f933ca0bea5872fb

홍아랑 2024-08-14

240814 홍아랑 지문 영상 출력 로직 추가

@72ee90d5cecb6a9815e1d5f2f933ca0bea5872fb

72a5742

72ee90d

client/views/pages/main/Chapter/Chapter1.vue

--- client/views/pages/main/Chapter/Chapter1.vue

+++ client/views/pages/main/Chapter/Chapter1.vue


             <div class="content title-box">
                 <p class="title mt25 title-bg">step1. Hello WORLD</p>
                 <div class="videoCon">
-                    <img src="../../../../resources/img/img34_s.png" data-num="1">
-                    <button class="videoStart" data-video="1" tabindex="0" aria-label="동영상 재생"><img src="../../../../resources/img/btn09_s.png"
-                            data-num="1"></button>
-                           <div class="look-text"> <button ><img src="../../../../resources/img/btn08_s.png" alt=""><p>지문 보기</p></button></div>
+                    <div ref="youtubePlayer" class="youtube-player"></div>
                 </div>
             </div>
-            <div class="next-btn"  @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/right.png" alt=""></div>
+            <div class="next-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/right.png" alt=""></div>
         </div>
-        <TextToImage/>
+        <TextToImage />
     </div>
 </template>
 
 <script>
 import TextToImage from '../../../component/TextToImage.vue';
+
 export default {
-    data() {
-        return {
-        }
+    components: {
+        TextToImage
     },
     methods: {
         goToPage(page) {
             this.$router.push({ name: page });
+        },
+        loadYouTubeAPI() {
+            return new Promise((resolve, reject) => {
+                if (window.YT && window.YT.Player) {
+                    resolve(); // API가 이미 로드된 경우
+                } else {
+                    const script = document.createElement('script');
+                    script.src = 'https://www.youtube.com/iframe_api';
+                    script.onload = () => {
+                        // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
+                        const checkYTReady = setInterval(() => {
+                            if (window.YT && window.YT.Player) {
+                                clearInterval(checkYTReady);
+                                resolve();
+                            }
+                        }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
+                    };
+                    script.onerror = () => reject(new Error('Failed to load the YouTube API script'));
+                    document.body.appendChild(script);
+                }
+            });
+        },
+        initializePlayer() {
+            if (!window.YT || !window.YT.Player) {
+                console.error('YouTube Player is not available');
+                return;
+            }
+            new window.YT.Player(this.$refs.youtubePlayer, {
+                height: '550',
+                width: '950',
+                videoId: 'VloEiK4Ihj8', // 비디오 ID
+                events: {
+                    'onReady': this.onPlayerReady
+                }
+            });
+        },
+        onPlayerReady(event) {
+            event.target.playVideo(); // 비디오가 준비되면 자동 재생
         }
     },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    components: {
-        TextToImage : TextToImage,
-    },
     mounted() {
+        this.loadYouTubeAPI()
+            .then(() => {
+                this.initializePlayer();
+            })
+            .catch(error => {
+                console.error('Error loading YouTube API:', error);
+            });
     }
 }
-</script>
+</script>
+
+<style scoped>
+.youtube-player {
+    width: 950px; /* 플레이어의 가로 크기 */
+    height: 550px; /* 플레이어의 세로 크기 */
+}
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -14,40 +14,80 @@
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">step1. Hello WORLD</p>
16	16	<div class="videoCon">
17		- <img src="../../../../resources/img/img34_s.png" data-num="1">
18		- <button class="videoStart" data-video="1" tabindex="0" aria-label="동영상 재생"><img src="../../../../resources/img/btn09_s.png"
19		- data-num="1"></button>
20		- <div class="look-text"> <button ><img src="../../../../resources/img/btn08_s.png" alt=""><p>지문 보기</p></button></div>
	17	+ <div ref="youtubePlayer" class="youtube-player"></div>
21	18	</div>
22	19	</div>
23		- <div class="next-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/right.png" alt=""></div>
	20	+ <div class="next-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/right.png" alt=""></div>
24	21	</div>
25		- <TextToImage/>
	22	+ <TextToImage />
26	23	</div>
27	24	</template>
28	25
29	26	<script>
30	27	import TextToImage from '../../../component/TextToImage.vue';
	28	+
31	29	export default {
32		- data() {
33		- return {
34		- }
	30	+ components: {
	31	+ TextToImage
35	32	},
36	33	methods: {
37	34	goToPage(page) {
38	35	this.$router.push({ name: page });
	36	+ },
	37	+ loadYouTubeAPI() {
	38	+ return new Promise((resolve, reject) => {
	39	+ if (window.YT && window.YT.Player) {
	40	+ resolve(); // API가 이미 로드된 경우
	41	+ } else {
	42	+ const script = document.createElement('script');
	43	+ script.src = 'https://www.youtube.com/iframe_api';
	44	+ script.onload = () => {
	45	+ // 스크립트가 로드되면, `YT` 객체가 준비될 때까지 기다립니다.
	46	+ const checkYTReady = setInterval(() => {
	47	+ if (window.YT && window.YT.Player) {
	48	+ clearInterval(checkYTReady);
	49	+ resolve();
	50	+ }
	51	+ }, 100); // 100ms마다 `YT` 객체가 준비되었는지 확인
	52	+ };
	53	+ script.onerror = () => reject(new Error('Failed to load the YouTube API script'));
	54	+ document.body.appendChild(script);
	55	+ }
	56	+ });
	57	+ },
	58	+ initializePlayer() {
	59	+ if (!window.YT \|\| !window.YT.Player) {
	60	+ console.error('YouTube Player is not available');
	61	+ return;
	62	+ }
	63	+ new window.YT.Player(this.$refs.youtubePlayer, {
	64	+ height: '550',
	65	+ width: '950',
	66	+ videoId: 'VloEiK4Ihj8', // 비디오 ID
	67	+ events: {
	68	+ 'onReady': this.onPlayerReady
	69	+ }
	70	+ });
	71	+ },
	72	+ onPlayerReady(event) {
	73	+ event.target.playVideo(); // 비디오가 준비되면 자동 재생
39	74	}
40	75	},
41		- watch: {
42		-
43		- },
44		- computed: {
45		-
46		- },
47		- components: {
48		- TextToImage : TextToImage,
49		- },
50	76	mounted() {
	77	+ this.loadYouTubeAPI()
	78	+ .then(() => {
	79	+ this.initializePlayer();
	80	+ })
	81	+ .catch(error => {
	82	+ console.error('Error loading YouTube API:', error);
	83	+ });
51	84	}
52	85	}
53		-</script> (No newline at end of file)
	86	+</script>
	87	+
	88	+<style scoped>
	89	+.youtube-player {
	90	+ width: 950px; /* 플레이어의 가로 크기 */
	91	+ height: 550px; /* 플레이어의 세로 크기 */
	92	+}
	93	+</style>

Delete comment