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/logo2.png" alt="" />
</div>
</router-link>
</div>
<div class="title-box mb25 flex align-center mt40" style="
justify-content: space-between;
">
<div>
<span class="title mr40">1. Hello WORLD</span>
<span class="subtitle">my name is dd</span>
</div>
<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";
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);
});
},
};
</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>