유튜브 동영상 (전체재생시간/현재재생시간) 체크
<style>
.homzzang {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
}
.homzzang iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<div class="homzzang">
<iframe src="https://www.youtube.com/embed/m8ndX5pz-h0?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<form action="..." method="...">
<input id="ytb_cur" name="ytb_cur">
<input id="ytb_tot" name="ytb_tot">
</form>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
ytb = new YT.Player(document.querySelector(".homzzang iframe"), { "onReady": (event) => { event.target.playVideo(); } } );
setInterval( () => {
ytb_cur.value = Math.floor(ytb.getCurrentTime()); // 현재
ytb_tot.value = Math.floor(ytb.getDuration()); // 전체
}, 1000);
}
</script>
결과보기
PS1. 모두 시청 여부 체크: (yt_current >= yt_total-1) (∵ 핑크색코드)
PS2. 활용: 다른 영상 재생 / 다음 부분부터 재생 / 시청 완료 회원 리스트 등
비타주리 님 (221219) https://sir.kr/g5_tip/19529
