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

이 글에서는 주로 HTML5 비디오 자막의 사용 및 제작을 소개합니다. HTML5를 사용하면 비디오 자막을 지정할 수 있습니다. 도움이 필요한 친구는 이를 참조할 수 있습니다.

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

<video id="video"  controls>
    <source src="./step.mp4" type="video/mp4">
    <track label="中文字幕" kind="subtitles" chapters metadata srclang="zh" src="./caption.vtt" default>
    <track label="ABC" kind="subtitles" srclang="de" src="./caption1.vtt">
    <track label="Number" kind="subtitles" srclang="es" src="./caption2.vtt">
 </video>

track 속성 소개:

• kind에는 파일에 포함된 콘텐츠 유형을 나타내는 subtitles 값이 할당됩니다.

• label에는 자막 세트에 사용되는 언어를 나타내는 값이 할당됩니다. - 예를 들어 영어 또는 독일어 - 이러한 태그는 사용자가 보고 싶은 자막 언어를 쉽게 선택할 수 있도록 사용자 인터페이스에 표시됩니다.

• src에는 각 경우 관련 WebVTT 자막 파일을 가리키는 유효한 URL이 할당됩니다.

• srclang은 각 자막 파일의 내용이 위치한 언어를 나타냅니다.

• 기본 속성은 영어 요소에 설정되어 자막이 켜져 있고 사용자가 특정 선택을 하지 않았을 때 사용할 기본 자막 파일 정의임을 브라우저에 나타냅니다.

WebVTT 자막 파일

실제 자막 데이터가 포함된 파일은 지정된 형식(이 경우 WebVTT) 형식을 따르는 간단한 텍스트 파일입니다. 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 -->
// 위 시간에 해당하는 자막을 표시할 수 있습니다. aa는 클래스 이름과 유사합니다.
7c94d6775547745876e96f72b8cd7605Nine Nether Yinling 11117304df2b4245f4682191bb80317afa07
00:00:03.001 --> :00:06.000
053d7cb071a67aeff6e3edf21e104dde모든 신과 악마 22227304df2b4245f4682191bb80317afa07
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 스타일 설정

::cunone 개별 텍스트 트랙 큐를 대상으로 지정하려면 정의된 클럽과 일치하도록 스타일링하는 데 사용됩니다. 텍스트 힌트에 적용할 수 있는 CSS 속성은 다음과 같습니다.

• color

• opacity

• visibility

• text-꾸밈

• text-shadow

• 배경 메모리 Performance

• 개요 단축 속성

• font 단축 속성

• line-height

• white-space

== 참고: ::cue의 단서 스타일은 현재 Chrome, Opera 및 Safari는 아직 Firefox에서 사용되는 Chrome에서는 사용할 수 없습니다. ==

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);
}

브라우저 호환

IE

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

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

Safari

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

Chrome 및 Opera

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

위 내용은 HTML5 비디오 자막을 사용하고 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!