[js] JS - 유튜브 동영상 (전체재생시간/현재재생시간) 체크 ※ youtube iframe (유튜브 아이프레임) 모두 재생 완료 여부 체크

유튜브 동영상 (전체재생시간/현재재생시간) 체크

 

<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