홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML5 비디오 자막을 사용하고 만드는 방법

저자：Eve Cole 업데이트 시간：2025-02-25 21:32:02

HTML5를 사용하면 요소를 사용하여 비디오 자막을 지정할 수 있습니다. 이 요소의 다양한 속성을 사용하면 추가하는 콘텐츠 유형, 언어, 실제 자막 정보가 포함된 텍스트 파일에 대한 참조 등을 지정할 수 있습니다.

 <video id=비디오 컨트롤> <source src=./step.mp4 type=video/mp4> <track label=中文字幕kind=subtitles 장 메타데이터 srclang=zh src=./caption.vtt 기본값> <track label=ABC 종류=자막 srclang=de src=./caption1.vtt> <트랙 라벨=번호 종류=자막 srclang=es src=./caption2.vtt> </video>
추적 속성 소개:

  • kind에는 파일에 포함된 콘텐츠 유형을 나타내는 subtitles 값이 할당됩니다.
  • 레이블에는 이 자막 세트가 작성된 언어(예: 영어 또는 독일어)를 나타내는 값이 제공되며 이러한 레이블은 사용자가 자막을 보려는 언어를 쉽게 선택할 수 있도록 사용자 인터페이스에 나타납니다.
  • src에는 각 경우 관련 WebVTT 자막 파일을 가리키는 유효한 URL이 할당됩니다.
  • srclang은 각 자막 파일의 내용이 위치한 언어를 나타냅니다.
  • 기본 속성은 자막이 켜져 있고 사용자가 특정 선택을 하지 않았을 때 사용되는 기본 자막 파일 정의임을 브라우저에 나타내기 위해 영어 요소에 설정됩니다.
WebVTT 자막 파일

실제 자막 데이터가 포함된 파일은 지정된 형식(이 경우 WebVTT(Web Video Text Track) 형식)을 따르는 간단한 텍스트 파일입니다. WebVTT 플러그인 사양은 아직 개발 중이지만 주요 부분이 안정적이므로 오늘부터 사용할 수 있습니다.

Blender Foundation과 같은 비디오 제공업체는 비디오에 대한 텍스트 형식의 자막을 제공하지만 일반적으로 SRT(SubRip Text) 형식을 사용합니다. srt2vtt와 같은 온라인 변환기를 사용하여 WebVTT로 변환할 수 있습니다.

파일 형식 사양:

파일 확장자는 ==.vtt==입니다.

==.vtt==파일의 MIME 유형은 text/vtt입니다.

Chrome 및 Firefox 브라우저에서는 .vtt 자막을 장애물 없이 로드하고 표시할 수 있습니다. 그러나 IE10+ 브라우저의 경우 .vtt 자막도 지원되지만 MIME 유형을 정의해야 합니다. 그렇지 않으면 WebVTT 형식이 무시됩니다. 더 간단한 방법은 자막이 있는 폴더 아래에 .htaccess 파일을 추가하고 그 안에 AddType text/vtt .vtt를 작성하는 것입니다.

//파일 시작 부분에 ==WEBVTT==를 선언해야 합니다.

WEBVTT

//시작 시간-->종료 시간, 단위는 밀리초

00:00:00.001 --> 00:00:03.000

// 위 시간에 해당하는 자막을 표시합니다. 스타일은 별도로 설정할 수 있습니다. aa는 클래스 이름과 유사합니다.

<v aa>나인 네더 인링 1111</v>

00:00:03.001 --> 00:00:06.000

<v bb>신과 악마 2222</v>

00:00:06.001 --> 00:00:09.000

내 피의 몸으로 3333

00:00:09.001 --> 00:00:12.000

희생 4444

00:00:12.001 --> 00:00:15.000

세 개의 삶과 일곱 개의 삶 5555

자막 CSS 스타일 설정

::cue 의사 요소는 정의된 큐와 일치하므로 스타일링 목적으로 개별 텍스트 트랙 큐를 대상으로 지정하는 핵심입니다. 텍스트 힌트에 적용할 수 있는 CSS 속성은 다음과 같습니다.

  • 색상
  • 불투명
  • 시계
  • 텍스트 장식
  • 텍스트 그림자
  • 배경 속기 성능
  • 간략한 성능 개요
  • 글꼴 단축 속성
  • 선 높이
  • 공백

==참고: ::cue의 큐 스타일은 현재 Chrome, Opera 및 Safari에서 작동하지만 아직 Firefox에서는 작동하지 않습니다. ==

WebVTT는 스타일 제어를 위해 일부 HTML 태그도 지원합니다. 일반적인 태그로는 sound ==v== 태그, color ==c== 태그, 굵은 글씨 ==b== 태그, 기울임꼴 ==i== 태그 및 밑줄 ==u가 있습니다. == 태그, ==ruby== 및 ==lang== 태그 등

 //자막 스타일 설정 video::cue{ background-color:transparent; color:white;font-size:20px; line-height: 100px;}//한 줄 자막 스타일 설정 video::cue( v[voice= aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}
브라우저 호환

즉

기본적으로 Internet Explorer 10+ 자막이 활성화되어 있으며 기본 컨트롤에는 방금 만든 메뉴와 동일한 기능을 제공하는 버튼과 메뉴가 포함되어 있습니다. 기본 속성도 지원됩니다.

==참고: MIME 유형을 정의하지 않으면 IE는 WebVTT 파일을 완전히 무시합니다. AddType text/vtt .vtt==가 포함된 적절한 디렉토리에 .htaccess 파일을 추가하면 이 작업을 쉽게 수행할 수 있습니다.

원정 여행

Safari 6.1+는 Internet Explorer 10+에 대해 유사한 지원을 제공하며, 사용 가능한 다양한 옵션이 포함된 메뉴를 표시하고 브라우저가 선택할 수 있는 자동 옵션을 추가합니다.

크롬과 오페라

이러한 브라우저는 유사한 구현을 가지고 있습니다. 자막은 기본적으로 활성화되어 있으며 기본 컨트롤 세트에는 자막을 켜고 끄는 'cc' 버튼이 포함되어 있습니다. Chrome과 Opera는 기본 요소의 속성을 무시하고 대신 브라우저의 언어를 자막 언어와 일치시키려고 합니다.

요약

위 내용은 에디터가 소개한 HTML5 영상 자막 활용 및 제작 방법입니다. 문의사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

관련 기사