H5 영상 구현 및 탄막 운용 방법

이번에는 H5 영상 구현 및 탄막 운용 방법을 알려드리겠습니다. H5 영상 구현 및 탄막 운용 시 주의사항은 무엇인가요? HTML5를 사용하면 요소를 사용하여 동영상의 자막을 지정할 수 있습니다. 이 요소의 다양한 속성을 사용하면 추가하는 콘텐츠 유형, 언어, 실제 자막 정보가 포함된 텍스트 파일에 대한 참조 등을 지정할 수 있습니다.

<video>
    <source>
    <track>
    <track>
    <track>
 </track></track></track></source></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는 클래스 이름과 유사합니다.
Nine Nether Yinling 1111
00:00:03.001 --> :00:06.000
모든 신과 악마 2222
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

배경 속기 성능
개요 속기 성능
글꼴 속기 속성
• line-height

• white-space

== 참고::: 현재 단서 스타일 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);
}

브라우저 호환

IE

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

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

Safari

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

Chrome 및 Opera

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 내용을 확인하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!

추천 자료:

Vue.js를 사용하여 mpvue 프레임워크를 개발하는 단계에 대한 자세한 설명

jquery 전체 페이지 플러그인으로 헤더 및 테일 저작권 관련 추가

위 내용은 H5 영상 구현 및 탄막 운용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!