메뉴 건너뛰기

조회 수 0 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
e>
#ytDiv { width:800px; height:450px; }
#ytDiv iframe { width:100%; height:100%; }
</style>
<div id="ytDiv"><iframe src="https://www.youtube.com/embed/T2ZNOZmdD-E?enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
<input id="yt_current" name="yt_current">
<input id="yt_total" name="yt_total">
 
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
    ytDiv = new YT.Player(document.querySelector("#ytDiv iframe"), { "onReady": (event) => { event.target.playVideo(); } } );
    setInterval( () => {
        yt_current.value = Math.ceil(ytDiv.getCurrentTime());
        yt_total.value = Math.floor(ytDiv.getDuration());
    }, 1000);
}
</script>

 

유튜브 동영상을 강좌동영상 등으로 사용할 때 회원이 다 보았는지 덜 보았는지를 체크하는 기본 로직입니다.

https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

 

그리고 아래처럼 폼을 하나 감아서 액션문서에서 DB 에 저장하거나 아작스로 넘기거나 등등...

yt_current 가 yt_total 보다 크거나 같다면 모두시청 아니라면 시청미완료 등으로 로직을 짜 주면 되겠습니다. 

 

<form>

<input id="yt_current" name="yt_current">
<input id="yt_total" name="yt_total">

</form>


  1. 접속주소가 https로 되여 있는지 판단하여 $g5_path['url']를 수정하기

    Date2024.04.09 Views8
    Read More
  2. 하나의 게시판에 여러 스킨을 적용해 보자

    Date2024.04.09 Views0
    Read More
  3. 회원가입 약관동의 전체동의 보완

    Date2024.04.09 Views0
    Read More
  4. 특정국가 차단하기

    Date2024.04.09 Views1
    Read More
  5. input 에 숫자 입력시 3자리 콤마 자동

    Date2024.04.09 Views0
    Read More
  6. 약간간단 주소복사 버튼

    Date2024.04.09 Views0
    Read More
  7. NICE API 인증모듈

    Date2024.04.09 Views1
    Read More
  8. input에 datepicker 달력 날짜 넣기

    Date2024.04.09 Views0
    Read More
  9. 유튜브 동영상 시간체크 후 폼 전송하기

    Date2024.04.09 Views0
    Read More
  10. mov 업로드시 mp4 자동 변환

    Date2024.04.09 Views0
    Read More
Board Pagination Prev 1 2 3 4 Next
/ 4

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved