[웹퍼블리싱] 동영상 자막 연동하기

보통 자막파일을 srt 로 하기도 하는데, 브라우저에 따라 지원이 안되는 경우가 있어서, vtt 자막 파일을 추천한다.

 

파이썬의 whisper 를 이용해서 해당 동영상의 vtt 파일을 미리 만들어 놓는다.

 

(whisper_crt) C:\ai_study\whisper_crt>whisper abc.mp4 --language Korean --task transcribe --output_format vtt

[00:52.000 --> 00:54.000]  I know festival lover.
[00:54.000 --> 00:56.000]  페스티벌을 사랑하는 사람인지.
[00:56.000 --> 00:58.000]  Food lover. 음식을 사랑하는 사람인지.
[00:58.000 --> 00:59.000]  Or I'm an adventure lover.
[00:59.000 --> 01:01.000]  목을 사랑하는 사람인지.
[01:01.000 --> 01:07.000]  이 목이라는 것은 뭐냐면은 보통 액티비티라고 얘기하거든.
[01:07.000 --> 01:11.000]  약간 뭐 패러글라이딩이라든가 배타는 거를 넣잖아.
[01:11.000 --> 01:15.000]  여러가지 뭐 어떤 채용적인 그런 부분을 얘기하는 것 같다.
[01:15.000 --> 01:18.000]  We recommend the three wonderful travel sites.
[01:18.000 --> 01:23.000]  세 가지 놀라운 뭐 경기로운 여행 사이트를 추천합니다.

 

 

[apache - .htaccess] - 내서버의 자막을 다른 웹서버에서 이용하게끔 할때

# VTT MIME
AddType text/vtt .vtt

# CORS: 같은 출처라면 사실 필요 없음. 혹시 외부서버에서도 쓰게 할거면 아래 넣기
<FilesMatch "\.vtt$">
  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Headers "Origin, Range, Content-Type, Accept"
  Header set Access-Control-Expose-Headers "Content-Length, Content-Range"
</FilesMatch>

 

 

HTML5 

 

<video id="video1" controls  crossorigin="anonymous" autoplay width="100%" height="100%" loop poster="" controlsList="nodownload" volume="0.5">
<source src="/pds/upandup_media/high_gongtong2_chonjae_josu_lesson1.mp4" type="video/mp4" />
<track label="한글자막" kind="subtitles" srclang="ko" default src="/data/movie.vtt">

현재의 브라우저는 지원하지 않습니다.
</video>