Source of video and subtitles: https://github.com/brenopolanski/html5-video-webvtt-example

Features

• Contorl video and its subtitle with shortcuts
• Show/hide subtitles
• Click a subtitle to go to the video frame
• Star your favorite subtitles, and show only starred subtitles
• Copy subtitles to clibboard
• Subtitles are scrolled automatically
• Responsive UI
• Electron-based application. Use HTML, CSS and Javascript

기능 소개

• 어학공부용 어플
• 자막과 함꼐 공부
• 윈도우, Mac OS, 리눅스 모두 지원

단축키

• 앞/뒤 이동
  • z - 7초 뒤로
  • x - 5초 뒤로
  • c - 3초 뒤로
  • v - 1초 뒤로
  • n - 5초 앞으로
  • m - 10초 앞으로
  • , - 15초 앞으로
• h - 자막 가리기/보이기
• s - 자막 켜기/끄기
• g - 문장 다시 듣기
• 스페이스 - 일시정지

사용법

1. 준비단계

• smi 자막 파일이면 vtt로 변경해야 함
• 영상을 재생하려면 webm 포맷의 영상이 필요함
• 영상이름과 자막파일 이름이 같아야 하고 영상과 자막은 같은 폴더에 있어야 함

2. 자막과 함께 영어공부

• 자막을 가린상태로 완벽히 들리는지 확인한다
• 안들리는 문장은 자막을 켜서 확인한다
• 문장을 클릭해서 특정 문장부터 공부할 수 있다
• 단축키 사용, 클릭을 통해 반복을 통해 따라 말한다

3. 단축키를 이용하여 영상 컨트롤 가능. 단축키 섹션 참고

제약사항

• 영어 표현 검색시 vtt 자막 파일만 지원
  • smi를 srt로 변환해주는 사이트를 이용하여 srt 생성 가능
  • srt를 WebVTT로 변환해주는 사이트
• 현재 webm 포맷 영상만 지원
  • 카카오 인코더를 이용하여 webm 포맷으로 변경 가능

Thanks to

• Electron
• Getting Started With the Track Element