mp4 동영상을 모두 시청하였는지 확인하는 방법 있을까요?
본문
mp4 동영상 게시판을 만들려고 하는데 해당 동영상을 스킵하거나 하지 않고 70% 이상 봤는지 확인하는 코드는 없을까요?
또는 방안이 있는지 궁금합니다.
일반 학습 동영상 사이트를 구상중인데 동영상을 스킵하지 않고 쭉 보는것을 개발하려고 하고 있어서 참고될만한 사항을 알아보고 있습니다.
답변 3
예전에 이와 비슷한 유튜브형 그누게시판을 의뢰로 만들어 드렸던 기억이 있습니다만...
<video id="myVideo" ...></video>
위에서 mp4 의 현재시간은 myVideo.currentTime 이고 토탈타임은 myVideo.duration 입니다.
1. 동영상 로딩시 duration 의 70% 값을 추출하여 반올림 합니다.
예를 들어 121 초 짜리라면 121 * 70 / 100 하면 84.7 이 나오는데
이걸 반올림(Math.round) 한 85 를 my70 = 85; 등의 변수로 담아둡니다.
2. 빈 배열을 하나 만듭니다. checkSec = [];
셋인터벌로 1초마다 Math.ceil(myVideo.currentTime), 즉 현재타임의 올림값을 체크하여 그 배열에 push() 하여 담아둡니다.
예를 들어서 5초가 지난 후 그 배열은 checkSec = [1, 2, 3, 4, 5] 가 됩니다.
단 재수 없을 경우 배열이 [1, 2, 2, 3, 4, 5] 처럼 중복수가 발생할 수 있는데 배열의 push() 에서 중복수가 있다면 추가하지 않는다는 방비용 로직을 추가해 줍니다.
3. 배열의 총갯수 length 가 my70 인 85보다 크게 되면 처음부터 만들어 둔 히든된 input 에 "yes" 가 입력되도록 하면서 동시에 셋인터벌을 클리어시킵니다. input 대신 변수도 상관없습니다.
이렇게 되면 동영상을 건너 뛸 경우 배열에는 중간값이 빠지기 때문에 85 보다 작은 수가 되어 "yes" 가 찍히지 않습니다.
4. 동영상 시청자가 "시청 완료" 버튼을 누르면 input 의 value 가 "yes" 일 경우에만 여분필드 wr_1 에 그 시청자의 아이디를 *아이디1 등으로 담아 날려주고 새로고침이 들어가게 합니다.
5. 이렇게 해서 wr_1 에는 *아이디1*아이디2*아이디3 ... 이렇게 담아집니다.
회원이 그 게시글에 들어오면 wr_1 을 * 으로 explode 한 배열의 각 요소 중 하나와 회원의 아이디가 일치한다면 "동영상을 시청하셨습니다" 를 보이게 하고 아니라면 "동영상을 시청하셔야 합니다" 를 보이게 합니다.
6. 관리자가 그 게시글을 누가 다 보았는지 확인하기 위해서는 각 게시글의 wr_1 을 보기 편하게끔 따로 페이지를 만들어 줍니다.
----------
이상이 제가 작업한 대충의 순서입니다.^^
비타주리님이 올려주신 코드를 보고 구상을 하고 있습니다.
https://sir.kr/g5_tip/19529?sfl=wr_subject%7C%7Cwr_content&stx=%EB%8F%99%EC%98%81%EC%83%81
위의 좋은 정보가 있으나 현재 문제점은 재생바를 끝까지 옮겨버리면 다 시청한것이 되어서 재생바를 앞으로 당기는것을 방지하는 방법을 알아보고 있습니다.
재생 버튼을 새로 만들려고 하는데 재생 이동하는 바를 뒤로 옮겨 버리면 시청 완료가 되는것을 방지할 방안을 찾고 있습니다.
기본적으로 timeupdate 이벤트 핸들러로 currentTime 을
내부 정의한 적절한 비율로 서버 수집하고 계산하는 방식을 생각해 볼수 있고
그에따른 동영상 트래픽, 어뷰징, 부하 등을 고려해
동영상 전용 호스팅, 서버 검증처리, 로직 최적화 등의 항목이 예상됩니다.
비타주리님 코드를 참고하여 구상해 보고 있습니다.
https://sir.kr/g5_tip/19529?sfl=wr_subject%7C%7Cwr_content&stx=%EB%8F%99%EC%98%81%EC%83%81
위의 좋은 정보가 있으나 현재 문제점은 재생바를 끝까지 옮겨버리면 다 시청한것이 되어서 재생바를 앞으로 당기는것을 방지하는 방법을 알아보고 있습니다.
그런 문제가 어뷰징에 해당합니다.
클라이언트 리소스의 컨트롤을 막는것은 얼마든지 조작이 가능하므로
클라이언트 스크립트인 JavaScript 로 제어하려는 시도
HTML property, CSS 등을 이용한 제어 시도
등은 근본적으로 별 효과가 없습니다.
솔루션에서 엄격한 검증 기준을 적용해야하는 경우
검증 및 계산은 반드시 서버에서 이루어져야 합니다.
답변 감사합니다.
채택을 1분 밖에 못해드려서 아쉽습니다.
감사합니다.
별로 어려운 코드는 아니라 한번 짜 보았습니다.
70% 까지는 미디어바를 빨간색 div 가 덮어서 컨트롤 자체가 불가능하고 70% 가 넘어가면 그것이 remove 됩니다. css 에서 빨간색을 투명으로 바꾸면 되겠죠?
만일 이에 해당하지 않는 관리자의 경우라면 스크립트 전체를 php 의 if 로 싸서 예를 들어 $is_admin 등과 매치시키면 되구요.
myAction 함수 안에서 시청을 완료한 회원의 아이디를 아작스로 서버로 날리는 로직을 본인이 만들어 주세요.
원래 이건 크롬계열 브라우저 기준이라 다른 브라우저에서는 미디어바가 다를 수 있습니다.
그래서 안전하게 하려면 미디아바 자체를
https://wittazzurri.com/media/6/ 의 하단부처럼 커스텀해야 합니다.
결과는 https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
percentNumber = 70; 은 본인이 원하는 숫자로요.
<style>
#myPlayer { display:block; width:100%; }
#myPlayer::-webkit-media-controls-fullscreen-button { display:none; }
#percentDiv { position:absolute; left:0%; bottom:0%; width:100%; height:30px; background-color:#ff000080; }
</style>
<div style="position:relative;max-width:960px;margin:0 auto">
<video id="myPlayer" src="https://blog.kakaocdn.net/dn/cJN6hk/btsFg3JGn4O/lgH0KqgNGl6EuqkmPzg4AK/tfile.mp4" autoplay controls></video>
</div>
<script>
percentNumber = 70;
myPlayer.insertAdjacentHTML("afterend", "<div id='percentDiv'></div>");
function myAction() {
percentDiv.remove();
//원하는 코드 예를 들어 시청한 회원의 아이디를 아작스로 날려 db 에 저장하는 등등...
}
myPlayer.onloadeddata = () => {
percentSec = myPlayer.duration * percentNumber / 100;;
}
percentInterval = setInterval(() => {
if (myPlayer.currentTime > percentSec) {
clearInterval(percentInterval);
myAction();
}
}, 500);
</script>
정말 정말 감사합니다. ^^
참고하여 화면 개발해 보겠습니다.
저는 video 태그의 controls를 없애고 따로 만들어야 하나 생각 중이었습니다. ^^
