유튜브 동영상 시간체크 후 폼 전송하기 정보
유튜브 동영상 시간체크 후 폼 전송하기
본문
<style>
#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>
추천
10
10
댓글 15개
좋은 팁 고맙습니다.
@sinbi 지금 생각해보니 프론트에서 비교한 후 그 결과물만 폼 처리해서 시청완료와 시청미완료를 넘겨주는 것이 낫겠네요.
@비타주리 나중에 아주 혹시나 요긴하게 써먹을지몰라 찜해두었습니다. ㅎ 여러 영상으로 테스트해봤는데, 셋인터벌 함수 시간 설정 탓인지 1초가 부족한 시점에서 멈추더라구요. (yt_current >= yt_total-1) 조건으로 전부 재생여부 체크하면 될 듯 합니다.
@sinbi 아 그렇군요. 그거야 뭐 신비님처럼 1-2초 전 정도 융통성을 주면 되겠지요.
저도 얼마전에 제작의뢰를 받아서 짜 본 코드에요.
이것 보다는 훨 디테일해서 5분을 듣고 다음에 입방하면 처음부터가 아니라 5분 시점부터 재생이 되게요.
폼에도 단순한 타이머 뿐만이 아니라 멤버아이디와 게시판아이디와 게시글아이디를 같이 날려 저장해서 관리자가 본 사람 안 본 사람의 리스트까지를 만드는 코드인데 기본이 이 로직입니다.
저도 얼마전에 제작의뢰를 받아서 짜 본 코드에요.
이것 보다는 훨 디테일해서 5분을 듣고 다음에 입방하면 처음부터가 아니라 5분 시점부터 재생이 되게요.
폼에도 단순한 타이머 뿐만이 아니라 멤버아이디와 게시판아이디와 게시글아이디를 같이 날려 저장해서 관리자가 본 사람 안 본 사람의 리스트까지를 만드는 코드인데 기본이 이 로직입니다.
@비타주리 활용법 소개 감사합니다. ( + _________ + ) ==b
좋은팁 감사합니다^^
@푸른산타 감사합니다
좋은 팁 감사 합니다.
@들레아빠 감사합니다
동영상 시간체크 감사합니다
@미키손 감사합니다
좋은정보 감사합니다.
@rioskjh 감사합니다
감사합니다.
찾아보고 있었습니다.
좋은 정보 감사합니다.
궁금한 사항으로는 시청시간을 체크하는데 아래의 재생 이동하는 바를 움직일 수 없게 하거나 없애야 체크가 되지 않는지 궁금합니다.
예를 들면 재생 버튼을 끝까지 옮겨버리면 다 시청한걸로 인식되지 않은지 궁금합니다.
