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
File name
Commit message
Commit date
<template>
<div id="Chapter1" class="content-wrap">
<div style="margin: 30px 0px 50px; width: 20%">
<router-link to="/MyPlan.page">
<div class="logo mb25">
<img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
</div>
</router-link>
</div>
<div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
<BookInfo />
<button class="completeBtn" @click="complete">학습 종료</button>
</div>
<div class="flex justify-between align-center">
<div class="pre-btn">
<img src="../../../../resources/img/left.png" alt="" />
</div>
<div class="content title-box">
<p class="title mt25 title-bg">step1. Hello WORLD</p>
<div class="videoCon">
<div ref="youtubePlayer" class="youtube-player"></div>
</div>
</div>
<div class="next-btn" @click="goToPage('Chapter1_2')">
<img src="../../../../resources/img/right.png" alt="" />
</div>
</div>
<TextToImage />
</div>
</template>
<script>
import TextToImage from '../../../component/TextToImage.vue';
import BookInfo from '../../../component/BookInfo.vue';
export default {
components: {
TextToImage,
},
methods: {
complete() {
const { unit_id, book_id } = this.$route.query;
this.$router.push({
name: 'Dashboard',
query: { value: 1, unit_id, book_id },
});
},
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(); // 비디오가 준비되면 자동 재생
},
},
mounted() {
this.loadYouTubeAPI()
.then(() => {
this.initializePlayer();
})
.catch((error) => {
console.error('Error loading YouTube API:', error);
});
},
components: {
BookInfo: BookInfo,
},
};
</script>
<style scoped>
.youtube-player {
width: 950px;
/* 플레이어의 가로 크기 */
height: 550px;
/* 플레이어의 세로 크기 */
}
.completeBtn {
margin-right: 100px;
background-color: #ffba08;
padding: 10px 30px;
border-radius: 10px;
font-size: 28px;
font-family: 'ONEMobilePOPOTF';
}
</style>