메뉴 건너뛰기

조회 수 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>


List of Articles
번호 제목 날짜 조회 수
70 DatePicker 달력 플러그인을 활용한 날짜 입력 쉽게하기 file 2017.04.12 4611
69 다음날 00시에 쿠키 만료되도록 하는 방법 2014.02.27 4411
68 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-2 file 2017.04.13 4262
67 게시판 글쓰기 페이지에 다음 API 주소 입력기 사용하기 file 2017.04.12 3729
66 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-1 file 2017.04.13 3475
65 여분필드를 활용한 게시판 스킨 제작 - 기초 예제1-3 file 2017.04.13 3276
64 이름이나 연락처 중간 부분을 *** 표시로 숨기기 file 2017.04.12 3063
63 게시판 기본 스킨 목록 페이지 살펴보기 1 - list.skin.php 2017.04.13 2959
62 게시판 기본 스킨 글쓰기 페이지 살펴보기 2 - 상세 설명 2017.04.13 2916
61 여분필드를 활용한 게시판 스킨 제작 - 기본적인 사용 방법 2017.04.13 2892
60 게시판 글쓰기 페이지에 스마트 에디터 2개 이상 사용하기 2017.04.12 2778
59 DatePicker 달력 플러그인을 활용한 날짜 입력 쉽게하기 file 2017.04.12 2761
58 그누보드 확장변수 사용 2016.12.22 2634
57 게시판 기본 스킨 글쓰기 페이지 살펴보기 1 - write.skin.php 2017.04.13 2551
56 게시판 기본 스킨 내용보기 페이지 살펴보기 2 - 상세 설명 2017.04.13 2528
55 여분필드를 활용한 게시판 스킨 제작 - 여분 필드 10개 이상 사용하기 file 2017.04.12 2403
54 게시판 스킨 파일 구조 2016.12.22 2343
53 게시판 기본 스킨 목록 페이지 살펴보기 2 - 상세 설명 2017.04.13 2321
52 배열을 사용해서 여분필드 한 개로 연락처 입력란 3등분하기 file 2017.04.12 2292
51 게시판 스킨 목록 페이지에 이전 다음 페이지 링크 만들기 2017.04.12 1912
Board Pagination Prev 1 2 3 4 Next
/ 4

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved