웹 서버에 자막 파일(.vtt) 업로드 후 재생이 안될 경우(원인 및 해결 방법)

웹 서버에 자막 파일 업로드 후 비디오에서 재생 문제 및 해결 방법

서론

웹 서버에 자막 파일을 업로드했지만 HTML5 비디오 플레이어에서 자막이 제대로 표시되지 않는 문제는 흔히 발생합니다. 이는 여러 가지 요인으로 인해 발생하며, 효과적인 문제 해결을 위해서는 이러한 요인들을 이해하는 것이 중요합니다. 이 문서에서는 웹 비디오 자막 재생 문제의 주요 원인과 다양한 해결 방법을 자세히 설명합니다.

자막 파일 재생 문제의 주요 원인

웹 비디오에서 자막이 표시되지 않는 데에는 다양한 원인이 있을 수 있습니다. 주요 원인은 다음과 같습니다.

1. 잘못된 파일 경로 또는 파일 이름

HTML 코드에서 자막 파일의 경로가 잘못 지정되었거나 파일 이름에 오타가 있는 경우, 브라우저는 파일을 찾을 수 없어 자막을 표시할 수 없습니다. 자막 파일의 경로가 비디오 파일의 경로와 상대적으로 올바르게 설정되었는지 확인하고, 파일 이름의 대소문자를 정확하게 입력했는지 확인해야 합니다.

2. 잘못된 자막 파일 형식

HTML5 비디오 플레이어는 주로 WebVTT (.vtt) 형식을 지원합니다. SubRip (.srt), SubViewer (.sub), MicroDVD (.sub) 등 다른 형식의 자막 파일은 직접적으로 지원되지 않을 수 있으므로, WebVTT 형식으로 변환해야 합니다.

3. 잘못된 MIME 타입 설정

웹 서버는 MIME 타입을 사용하여 브라우저에게 어떤 종류의 파일이 전송되는지 알려줍니다. WebVTT 파일의 MIME 타입은 `text/vtt`입니다. 서버 설정에서 자막 파일의 MIME 타입이 올바르게 설정되어 있지 않으면 브라우저는 파일을 제대로 처리하지 못할 수 있습니다.

4. 인코딩 문제

자막 파일의 인코딩이 올바르지 않을 경우, 특히 UTF-8이 아닌 인코딩으로 저장된 경우, 특수 문자 또는 한글 등의 문자가 깨져서 표시될 수 있습니다. 자막 파일은 UTF-8 인코딩으로 저장해야 합니다.

5. 시간 동기화 문제

자막 파일의 시간 정보가 비디오와 동기화되지 않은 경우, 자막이 비디오 장면과 맞지 않게 표시됩니다. 자막 편집 도구를 사용하여 시간 정보를 정확하게 수정해야 합니다.

6. HTML5 <track> 태그의 잘못된 사용

자막을 추가하기 위해 사용되는 <track> 태그의 속성들이 올바르게 설정되어 있지 않은 경우 자막이 표시되지 않거나 예상치 못한 동작을 할 수 있습니다. 특히 `kind`, `src`, `srclang`, `label` 속성을 주의 깊게 확인해야 합니다.

7. 브라우저 호환성 문제

구형 브라우저는 <track> 태그를 제대로 지원하지 않을 수 있습니다. 최신 브라우저를 사용하는 것이 권장되지만, 구형 브라우저를 고려해야 하는 경우에는 폴리필(polyfill)을 사용하거나 대체 방법을 고려해야 합니다.

8. CORS (Cross-Origin Resource Sharing) 문제

비디오 파일과 자막 파일이 서로 다른 도메인에 있는 경우, CORS 문제가 발생하여 자막이 로드되지 않을 수 있습니다. 서버에서 CORS 설정을 통해 이를 해결해야 합니다.

자막 파일 재생 문제 해결 방법

위에서 언급한 문제들을 해결하기 위한 구체적인 방법은 다음과 같습니다.

1. 파일 경로 및 이름 확인

HTML 코드에서 <track> 태그의 `src` 속성에 지정된 파일 경로와 이름이 정확한지 확인합니다. 브라우저 개발자 도구 (F12 키)의 Network 탭에서 자막 파일이 정상적으로 로드되는지 확인할 수 있습니다. 404 오류가 발생하면 경로 또는 이름이 잘못된 것입니다.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="ko" label="Korean" default>
</video>
            

2. 자막 파일 형식 변환 (WebVTT)

SubRip (.srt) 등의 형식을 WebVTT (.vtt) 형식으로 변환해야 합니다. 온라인 변환 도구 또는 ffmpeg 등의 명령줄 도구를 사용할 수 있습니다.

ffmpeg를 사용한 변환 예시:

ffmpeg -i subtitles.srt subtitles.vtt
            

3. MIME 타입 설정

서버 설정에서 WebVTT 파일의 MIME 타입이 `text/vtt`로 설정되어 있는지 확인합니다. 아파치 웹 서버의 경우, `.htaccess` 파일에 다음 줄을 추가합니다.

AddType text/vtt .vtt
            

Nginx, IIS 등 다른 웹 서버의 경우, 각 서버의 설정 방법을 참조하여 MIME 타입을 설정해야 합니다.

4. 인코딩 확인 및 변환 (UTF-8)

텍스트 편집기 (Notepad++, Sublime Text, Visual Studio Code 등)를 사용하여 자막 파일을 열고 UTF-8 인코딩으로 저장되어 있는지 확인합니다. 다른 인코딩으로 되어 있다면 UTF-8로 변환하여 저장합니다.

5. 시간 동기화 수정

자막 편집 프로그램 (Aegisub, Subtitle Edit 등)을 사용하여 자막 파일의 시간 정보를 비디오와 동기화합니다. 이러한 프로그램들은 시각적인 타임라인 인터페이스를 제공하여 시간 조정을 용이하게 해줍니다.

6. <track> 태그 속성 확인 및 수정

<track> 태그의 속성들이 올바르게 설정되었는지 확인합니다.

• kind: 자막 종류를 지정합니다. `subtitles` (자막), `captions` (청각 장애인을 위한 자막), `descriptions` (시각 장애인을 위한 설명), `chapters` (챕터 제목), `metadata` (메타데이터) 등의 값을 가질 수 있습니다. 일반적으로는 `subtitles`를 사용합니다.
• src: 자막 파일의 경로를 지정합니다.
• srclang: 자막의 언어를 지정합니다. (예: "ko" - 한국어, "en" - 영어).
• label: 사용자가 자막 목록에서 선택할 때 표시되는 텍스트를 지정합니다.
• default: 페이지가 로드될 때 기본적으로 표시될 자막을 지정합니다.

7. 폴리필 사용

구형 브라우저를 지원해야 하는 경우, `video.js` 와 같은 비디오 플레이어 라이브러리를 사용하거나, track element를 지원하지 않는 브라우저를 위한 폴리필을 사용할 수 있습니다. 이러한 라이브러리는 브라우저 간 호환성 문제를 해결하고 추가적인 기능들을 제공합니다.

8. CORS 설정

비디오와 자막 파일이 서로 다른 도메인에 있는 경우, 자막 파일을 제공하는 서버에서 CORS 헤더를 설정해야 합니다. 예를 들어, 아파치 웹 서버의 경우 `.htaccess` 파일에 다음과 같은 설정을 추가할 수 있습니다.

Header set Access-Control-Allow-Origin "*"
            

하지만, 보안을 위해서는 "*" 대신 특정 도메인을 명시하는 것이 좋습니다. 예를 들어, `Header set Access-Control-Allow-Origin "http://example.com"` 과 같이 설정할 수 있습니다.

9. 자막 파일 검증

자막 파일의 문법 오류가 없는지 검증하는 것도 중요합니다. 온라인 WebVTT 검사 도구를 사용하여 자막 파일의 유효성을 확인할 수 있습니다.

10. 개발자 도구 활용

브라우저의 개발자 도구(특히 Network 탭과 Console 탭)를 활용하여 자막 파일의 로드 상태 및 오류 메시지를 확인할 수 있습니다. Network 탭에서는 자막 파일이 정상적으로 로드되었는지 (200 OK 상태 코드), Console 탭에서는 자막 파일 파싱 중 발생한 오류 메시지를 확인할 수 있습니다.

자막 파일 문제 해결 종합 체크리스트

자막 문제 해결을 위해 다음 체크리스트를 순서대로 확인해보세요.

1. 파일 경로 및 이름 확인: <track> 태그의 `src` 속성이 정확한지, 오타는 없는지 확인합니다.
2. 파일 형식 확인 및 변환: WebVTT (.vtt) 형식인지 확인하고, 아니라면 변환합니다.
3. MIME 타입 설정 확인: 서버에서 `text/vtt` MIME 타입이 올바르게 설정되었는지 확인합니다.
4. 인코딩 확인: UTF-8 인코딩으로 저장되었는지 확인합니다.
5. 시간 동기화 확인: 자막과 비디오의 시간 정보가 일치하는지 확인합니다.
6. <track> 태그 속성 확인: kind, `src`, `srclang`, `label`, `default 속성을 올바르게 설정했는지 확인합니다.
7. 브라우저 호환성 확인 및 폴리필 사용: 구형 브라우저를 고려해야 하는 경우 폴리필을 사용합니다.
8. CORS 설정 확인: 비디오와 자막 파일의 도메인이 다른 경우 CORS 설정을 확인합니다.
9. 자막 파일 문법 검증: 온라인 검사 도구를 사용하여 자막 파일의 문법 오류를 확인합니다.
10. 개발자 도구 활용: 브라우저 개발자 도구를 사용하여 파일 로드 상태 및 오류 메시지를 확인합니다.
11. 비디오 플레이어 라이브러리 사용 고려: `video.js`, `Plyr` 등과 같은 비디오 플레이어 라이브러리를 사용하면 자막 처리가 간편해지고 브라우저 호환성 문제도 해결할 수 있습니다.

자막 제작 및 편집 도구

자막 파일을 생성하거나 편집하는 데 도움이 되는 유용한 도구들이 있습니다.

• Aegisub: 고급 자막 편집 도구로, 시간 동기화, 스타일 지정 등 다양한 기능을 제공합니다.
• Subtitle Edit: 무료 오픈 소스 자막 편집 도구로, 다양한 형식을 지원하고 사용하기 쉽습니다.
• Subtitle Workshop: 오래된 자막 편집 도구이지만, 여전히 많은 사용자들이 사용하고 있습니다.
• 온라인 WebVTT 변환기: 온라인에서 간편하게 다른 형식의 자막을 WebVTT로 변환할 수 있는 도구들이 많이 있습니다.
• FFmpeg: 명령줄 도구로, 자막 변환 외에도 비디오 및 오디오 인코딩 등 다양한 멀티미디어 작업을 수행할 수 있습니다.

문제 해결 사례

실제 발생할 수 있는 문제와 해결 사례를 몇 가지 소개합니다.

• 문제: 자막이 전혀 표시되지 않음.
  • 해결: <track> 태그가 <video> 태그 내에 올바르게 위치하는지, `src` 속성의 경로가 정확한지, 자막 파일이 서버에 존재하는지 확인합니다. 또한, 개발자 도구를 이용하여 404 오류가 발생하는지 확인합니다.
• 문제: 자막의 특정 문자가 깨져서 표시됨.
  • 해결: 자막 파일이 UTF-8 인코딩으로 저장되었는지 확인하고, 다른 인코딩으로 되어 있다면 UTF-8로 변환합니다.
• 문제: 자막과 비디오의 싱크가 맞지 않음.
  • 해결: 자막 편집 도구를 사용하여 시간 정보를 수정합니다.
• 문제: 특정 브라우저에서만 자막이 표시되지 않음.
  • 해결: 해당 브라우저가 <track> 태그를 지원하는지 확인하고, 지원하지 않는 경우 폴리필을 사용하거나 비디오 플레이어 라이브러리를 사용하는 것을 고려합니다.

마치며...

웹 비디오 자막 문제는 다양한 원인에 의해 발생할 수 있지만, 체계적인 문제 해결 과정을 따르면 대부분의 문제를 해결할 수 있습니다. 이 문서에서 제시된 체크리스트와 해결 방법, 그리고 문제 해결 사례들을 참고하여 자막 문제를 효과적으로 해결하고 사용자에게 원활한 비디오 시청 경험을 제공할 수 있기를 바랍니다. 또한, 최신 웹 기술 및 관련 라이브러리들을 활용하여 보다 안정적이고 효율적인 자막 구현을 고려하는 것이 좋습니다.