시간(초)에 실시간으로 반응하는 자막
본문
안녕하세요. 자바스크립트를 이용하여 시간에 따라 on off 되는 자막을 만들려고 합니다.
1. 사전에 저장된 자막
12초 = 좋아요!
18초 = 노력하세요!
81초 = 다음에 봐요!
2. 영상 화면
<input type="text" id="timecode"> //영상을 재생하면 해당 input에 현재 재생시간이 초단위로 보여줍니다. 이부분은 개발 완료하였습니다. 잘 안되는 부분은 다음부분인 위에 재생시간에 맞춰 사전에 저장된 자막이 보여지는 부분입니다.
if 현재 재생시간이 12초이면 동영상 위에 "좋아요!" 라는 자막을 뜨고 3초 후 사라진다 (absolute 를 이용하여 영상 하단에 자막을 띄울 예정)
if 현재 재생시간이 18초이면 동영상 위에 "노력하세요!" 라는 자막을 뜨고 3초 후 사라진다
if 현재 재생시간이 81초이면 동영상 위에 "다음에 봐요!" 라는 자막을 뜨고 3초 후 사라진다
이런 형태를 자바스크립트로 구현하려면 어떤 방식으로 해야할까요?
실시간으로 id 값에 진행되는 초에 맞게 특정 class 를 제어해서 저장된 내용이 보이게 할 수 있을까요?
조언 구합니다. 감사합니다.
답변 2
이런게 있었군요.
아주 간단히 구현이 되네요.
소스를 보니 .vtt 확장자에 타임코드와 자막이 들어가 있고 이를 불러오더라고요.
저같은 경우, 그누보드 댓글을 이용하여
자막이 보여지는 시간과 자막내용을 등록하였고, 해당 view 페이지에 등록된 영상에 댓글에 입력된 내용으로 자막을 보여지게 하려고 하거든요.
그럼,,
댓글에 등록된 자막과 내용을 .vtt 파일로 저장하고 불러와야 겠네요...
아니면, 바로 댓글 내용을 select for 문으로 가져와서 보여주면 최고겠는데요..
혹시 .vtt 파일에 자막을 연동하는 것 말고
다른 방법도 있을까요?
답변 감사합니다!
셋인터벌로 동영상의 현재시간을 쳬크하는 이프문을 띄워주면 그리 어려운 코드는 아닙니다.
조건문은 4번 걸어주면 되겠네요.
단 어렵지 않다가 시간이 적게 걸린다는 걸 의미하지는 않습니다.
오디오와 비디오는 그 작동원리가 동일하니
위 코드 한번 참고해 보세요
이미 만드셨군요~ 만드신 소스도 아주 멋집니다.
그럼 저는 이 소스를 수정해서...
동영상 위에 자막 위치를 <div id="lrcDiv" style='position:absolute;'></div> 이 곳에 시간에 맞는 자막이 보여지게 하면 되겠네요??
만드신 소스에서 가사에 빨간 글로 변경되는 소스부분을 변경하면되겠습니다.
잘 연구해보겠습니다!!
많이 배웠습니다. 감사합니다.
